Vue的框架（了解）
前端MVC设计模式
- MVC设计模式,其实就是将前端实现某个业务的所有代码划分为三部分
- Model: 模型, 指数据模型,这个数据一般来自于服务器
- View: 视图, 指页面标签内容
- Controller:控制器, 指将数据展示到视图中的过程代码
- 前端MVC设计模式弊端: 需要在Controller控制器部分频繁进行DOM(遍历查找元素的代码)操作, 会影响执行效率.
M,V,VM设计模式
- Model: 模型, 指数据模型,这个数据一般来自于服务器
- View: 视图, 指页面标签内容
- ViewModel:视图模型, 将页面中可能发生改变的元素和某个变量在内存中进行绑定,当变量的值发生改变时会从内存中直接找到对应的元素让其改变.
Vue
- Vue框架是目前最流行的前端框架
- Vue对象相当于MVVM设计模式中的VM, 负责将页面中可能发生改变的元素和变量进行绑定, 绑定完之后会不断监听变量的改变, 当变量的值发生改变时会自动找到对应的元素并改变其显示内容.
安装独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
<script src=”https://cn.vuejs.org/js/vue.min.js”>官网链接地址<script>
模板语法
- 插值 文本（数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值）
- v-text=”变量”, 让元素的文本内容和变量进行绑定
- 使用 v-html 指令用于输出 html 代码：
<div> <!– {{info}}插值，让此处的文本和data里面的变量进行绑定–> <h1>{{info}}</h1> <!– v-text=”变量”，让此处的文本和data里面的变量进行绑定–> <p v-text=”info”></p> <hr> {{info}} <p v-html=”address”></p></div><script src=”../js/vue.js”></script><script> let v = new Vue({ el:”div”, data:{ info:”文本相关练习”, address:”地址<b>杭州</b>” } })</script>
- 属性 （HTML 属性中的值应使用 v-bind 指令）
- v-bind:属性名=”变量”, 让元素的xxx属性和变量进行绑定 可以省略掉v-bind
<!– 完整语法 –><a v-bind:href=”url”></a><!– 缩写 –><a :href=”url”></a><body><div> <!–v-bind属性绑定–> <input type=”text” v-bind:value=”msg”> <!–v-bind属性绑定 简写–> <input type=”text” :value=”msg”> <a :href=”url”>超链接</a> <img :src=”imgUrl” alt=””></div><script src=”../js/vue.js”></script><script> let v = new Vue({ el:”div”, data:{ msg:”属性绑定测试”, url:”http://www.baidu.com”, imgUrl:”../b.jpg” } })</script></body>
- 用户输入（input 输入框中我们可以使用 v-model 指令来实现双向数据绑定）
- v-model=”变量”, 双向绑定, 当变量的值发生改变页面会跟着改变, 页面的内容改变时变量也会跟着改变,只有使用form表单中的控件时才会涉及到双向绑定.
<body><div> <!–当需要获取input值的时候使用双向绑定–> <input type=”text” v-model=”msg”> <h1>{{msg}}</h1> a b <hr> <input type=”radio” v-model=”gender” value=”男”>男 <input type=”radio” v-model=”gender” value=”女”>女 <h2>{{gender}}</h2></div><script src=”../js/vue.js”></script><script> let v = new Vue({ el:”div”, data:{ msg:”双向绑定测试”, gender:”男” } })</script>
- 事件处理器（事件监听可以使用 v-on 指令）
- v-on:事件名=”方法”, 事件绑定 简写@事件名=”方法” , 调用的方法必须声明在Vue里面的methods里面
<!– 完整语法 –><a v-on:click=”doSomething”></a><!– 缩写 –><a @click=”doSomething”></a><!– 阻止单击事件冒泡 –><a v-on:click.stop=”doThis”></a><!– 提交事件不再重载页面 –><form v-on:submit.prevent=”onSubmit”></form><!– 修饰符可以串联 –><a v-on:click.stop.prevent=”doThat”></a><!– 只有修饰符 –><form v-on:submit.prevent></form><!– 添加事件侦听器时使用事件捕获模式 –><div v-on:click.capture=”doThis”>…</div><!– 只当事件在该元素本身（而不是子元素）触发时触发回调 –><div v-on:click.self=”doThat”>…</div><!– click 事件只能点击一次，2.1.4版本新增 –><a v-on:click.once=”doThis”></a><body><div> <input type=”button” value=”按钮1″ v-on:click=”f()”> <input type=”button” value=”按钮2″ @click=”ff()”> {{info}}</div><script src=”../js/vue.js”></script><script> let v = new Vue({ el:”div”, data:{info:”事件绑定”}, methods:{ f:functiоn () { v.info=”按钮1点击了”; }, ff(){ v.info=”按钮2点击了”; } } })</script>
- 条件判断v-if（条件判断使用 v-if 指令）
- v-if 指令将根据表达式 isVisible的值(true 或 false )来决定
- v-else 可以用 v-else 指令给 v-if 添加一个 “else” 块
- v-else-if v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。
- v-show 我们也可以使用 v-show 指令来根据条件展示元素
<body><div> <!–v-if让元素是否显示和变量进行绑定, 不显示时是把元素删除了–> <h1 v-if=”isVisible”>刘德华</h1> <!–v-else和v-if结合使用 和上面条件取反–> <h1 v-else>刘苍松</h1> <!–v-show让元素是否显示和变量进行绑定, 不显示时是把元素隐藏了 (频繁切换显示状态时使用)–> <h2 v-show=”isVisible”>张学友</h2></div><script src=”../js/vue.js”></script><script> let v = new Vue({ el:”div”, data:{ isVisible:true } })</script>
循环语句 (循环使用
v-for 指令)
v-for 指令需要以
car in arr 形式的特殊语法，
car是源数据数组并且
arr是数组元素迭代的别名。
<body> <div> <table border=”1″> <caption>国产车</caption> <tr> <th>编号</th> <th>名字</th> <th>价格</th> <th>类型</th> </tr> <tr v-for=”(car,i) in arr”> <td>{{i+1}}</td> <td>{{car.name}}</td> <td>{{car.price}}</td> <td>{{car.type}}</td> </tr> </table> </div> <script src=”../js/vue.js”></script> <script> let v = new Vue({ el:”div”, data:{ arr:[{name:”比亚迪”,price:250000,type:”轿车”}, {name:”红旗”,price:888888,type:”轿车”}, {name:”东风导弹”,price:9999999999,type:”导弹”}] } }) </script></body>
Ajax(axios) –GET
new Vue({ el: ‘#APP’, data () { return { info: null } }, mounted () { axios .get(‘https://www.celinf.com/json_demo.json’) .then(response => (this.info = response)) .catch(functiоn (error) { // 请求失败处理 console.log(error); }); }})
Ajax(axios) –POST
new Vue({ el: ‘#app’, data () { return { info: null } }, mounted () { axios .post(‘https://www.celinf.com/axios_post.php’) .then(response => (this.info = response)) .catch(functiоn (error) { // 请求失败处理 console.log(error); }); }})
阻止a标签跳转四种方法
<!–第一种–><a href=”javascript:;”>我不会被跳转</a><!–第二种–><a href=”javascript:void(0)”>我不会被跳转</a><!–第三种–><a href=”http://www.baidu.com” onclick=”fn.skip_1();return false”>我不会被跳转</a><!–第四种–><a href=”http://www.baidu.com” onclick=”fn.skip_2()”>我不会被跳转</a><script> var fn = { skip_1: functiоn() { console.log(‘我不会被跳转’); }, skip_2: functiоn() { //阻止冒泡 console.log(‘我不会被跳转’) var event = event || window.event; if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }} </script>学习记录，如有侵权请联系删除
原创文章，作者：starterknow，如若转载，请注明出处：https://www.starterknow.com/126621.html
starterknow