vue的优点：
轻量级框架
只关注视图层,是一个构建数据的视图集合
Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统
简单易学
国人开发,中文文档,不存在语言障碍,易于理解和学习
双向数据绑定
vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系，就是以input 标签的v-model属性来声明的，因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。
这也就是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。
视图,数据,结构分离
使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作
开发方便
可以用很少的代码，实现js的大部分功能，可以快速的开发网站
Vue初始
-
插值表达式{{ message }}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <!--导入vue的包--> <script src="vue.min.js"></script> </head> <body> <!--Vue实例所控制的这个元素区域，就是我们的V--> <div id="app"> <!--插值表达式不会覆盖标签内部的内容，只会替换插值表达式位置的内容--> <p {{message}}</p> </div> <script> // 创建一个Vue的实例 // 当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数 // 注意：我们new出来的这个vm对象，就是我拉mvvm中的vm调试者 var vm = new Vue({ // 表示当前new的这个Vue实例，要控制页面上的哪个区域 // el是element的缩写 el: '#app', // 这里的data就是MVVM中的M,专门用来保存每个页面在的数据的 data: { // data属性中存放的是el中要用到的数据 //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了 message: 'Hello Vue!', }, methods:{ //这个位置可以写函数 } }); </script> </body> </html> -
v-cloak解决插值表达式页面渲染过程中，由于变量没有初始化而导致的闪烁问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <!--导入vue的包--> <script src="vue.min.js"></script> </head> <body> <!--Vue实例所控制的这个元素区域，就是我们的V--> <div id="app"> <!--插值表达式不会覆盖标签内部的内容，只会替换插值表达式位置的内容--> <p v-cloak>{{message}}</p> </div> <script> // 创建一个Vue的实例 // 当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数 // 注意：我们new出来的这个vm对象，就是我拉mvvm中的vm调试者 var vm = new Vue({ el: '#app', //表示当前new的这个Vue实例，要控制页面上的哪个区域 // 这里的data就是MVVM中的M,专门用来保存每个页面在的数据的 data: { // data属性中存放的是el中要用到的数据 //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了 message: 'Hello Vue!', }, methods:{ // 这个位置可以写函数 } }); </script> </body> </html> -
v-text把文本属性渲染到页面上，会覆盖标签内的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <!--导入vue的包--> <script src="vue.min.js"></script> </head> <body> <!--Vue实例所控制的这个元素区域，就是我们的V--> <div id="app"> <!--v-text把文本属性渲染到页面上，会覆盖标签内的内容--> <h3 v-text="message"></h3> </div> <script> // 创建一个Vue的实例 // 当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数 // 注意：我们new出来的这个vm对象，就是我拉mvvm中的vm调试者 var vm = new Vue({ el: '#app', //表示当前new的这个Vue实例，要控制页面上的哪个区域 // 这里的data就是MVVM中的M,专门用来保存每个页面在的数据的 data: { // data属性中存放的是el中要用到的数据 // 通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了 message: 'Hello Vue!', }, methods:{ // 这个位置写函数 } }); </script> </body> </html> -
v-html可以把带标签的内容转义为网页内容展示到页面上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <!--导入vue的包--> <script src="vue.min.js"></script> </head> <body> <!--Vue实例所控制的这个元素区域，就是我们的V--> <div id="app"> <!--v-html可以把带标签的内容转义为网页内容展示到页面上--> <p v-html="msg"></p> </div> <script> // 创建一个Vue的实例 // 当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数 // 注意：我们new出来的这个vm对象，就是我拉mvvm中的vm调试者 var vm = new Vue({ el: '#app', //表示当前new的这个Vue实例，要控制页面上的哪个区域 // 这里的data就是MVVM中的M,专门用来保存每个页面在的数据的 data: { // data属性中存放的是el中要用到的数据 msg: '<h1>我是一个V-html的展示内容</h1>', // v-html要展示的内容 }, methods:{ // 这个位置写函数 } }); </script> </body> </html> -
v-bind绑定属性的指令 ，缩写为 ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <!--导入vue的包--> <script src="vue.min.js"></script> </head> <body> <!--Vue实例所控制的这个元素区域，就是我们的V--> <div id="app"> <!--v-bind是Vue中提供的用于绑定属性的指令--> <!--v-bind指令可以被简写为：要绑定的属性--> <input type="button" value="按钮" :title="mytitle + '我是拼接过来的'"> <!--v-bind中可以写合法的js表达式--> <input type="button" value="按钮" v-bind:title="mytitle"> </div> <script> // 创建一个Vue的实例 // 当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数 // 注意：我们new出来的这个vm对象，就是我拉mvvm中的vm调试者 var vm = new Vue({ el: '#app', //表示当前new的这个Vue实例，要控制页面上的哪个区域 // 这里的data就是MVVM中的M,专门用来保存每个页面在的数据的 data: { // data属性中存放的是el中要用到的数据 mytitle: '这是我自己定义的一个title', }, methods:{ } }); </script> </body> </html> -
v-on事件绑定机制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <!--导入vue的包--> <script src="vue.min.js"></script> </head> <body> <!--Vue实例所控制的这个元素区域，就是我们的V--> <div id="app"> <!--Vue中提供了v-on事件绑定机制--> <input type="button" value="点击这里" v-on:click="show"> <input type="button" value="点击这里" @click="show1"> </div> <script> // 创建一个Vue的实例 // 当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数 // 注意：我们new出来的这个vm对象，就是我拉mvvm中的vm调试者 var vm = new Vue({ el: '#app', //表示当前new的这个Vue实例，要控制页面上的哪个区域 // 这里的data就是MVVM中的M,专门用来保存每个页面在的数据的 data: { }, methods:{ show: function () { alert("Hello") }, show1:function () { alert("这是缩写的v-on") } } }); </script> </body> </html> -
事件修饰器
<!-- 1、.stop阻止冒泡 2、.prevent阻止默认事件 3、.capture添加事件侦听器时使用事件截获模式 4、.self只当事件在该元素本身触发时触发回调 5、.once事件只触发一次 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue的学习</title> <script src="vue.min.js"></script> <style> .inner{ width: 100%; background-color: aqua; } </style> </head> <body> <div id="app"> <!--使用 .stop 阻止冒泡--> <div class="inner" @click="divclick"> <input type="button" value="戳我！！" @click.stop="btnclick"> </div> <!--使用 .prevent 阻止默认行为--> <a href="https://www.baidu.com" @click.prevent="linkclick">有问题，先百度</a> <div class="inner" @click.capture="div1click"> <input type="button" value="戳我！！" > </div> <a href="https://www.baidu.com" @click.prevent.self="link1click">有问题，先百度</a><br> <button @click.once="link2click">点击这里</button> </div> <script> var vm = new Vue({ el: "#app", data:{ }, methods:{ divclick: function () { console.log("这是触发了inner div的点击事件") }, btnclick: function () { console.log("这是触发了btn的点击事件") }, linkclick:function () { console.log("触发了链接的点击事件") }, div1click:function () { console.log(".capture添加事件侦听器时使用事件截获模式") }, link1click:function () { console.log("自身事件") }, link2click:function () { console.log("我只能点一次") } } }) </script> </body> </html> -
v-for
用v-for可以实现数组、数组对象、对象以及数字的迭代，省去写js代码的过程
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-for学习</title> <script src="vue.min.js"></script> </head> <body> <div id="app"> <!--我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。--> <!--<p v-for="(item, i) in list1">索引值为：{{i}}----每一项为：{{item}}</p>--> <!--<p v-for="item in list_obj">ID值为：{{item.id}}----name为：{{item.name}}</p>--> <!--<p v-for="(val, key) in obj">val值为：{{val}}----key为：{{key}}</p>--> <!--in后面可以放入，数组，数组对象，对象，数字--> <!--注意：如果用v-for迭代数字，前面的count值从1开始--> <p v-for="count in 10">这是第{{count}}次循环</p> </div> <script> var vm = new Vue({ el: "#app", data: { // 用v-for循环一个数组 list1: [1, 2, 3, 4, 5], // 用v-for循环一个对象 list_obj : [ {"id": 1, "name": "张三"}, {"id": 2, "name": "李四"}, {"id": 3, "name": "王五"}, {"id": 4, "name": "赵六"}, ], obj:{ "id": 1, "name": "tom", "sex": "man" } }, methods:{ } }) </script> </body> </html>vue过滤器
Vue.js允许自定义过滤器，可被 用作一些常见的文本格式化，过滤器可以用在两个地方：mustache插值和v-bind表达式，过滤器应该被 添加在javascript表达式的尾部，由管道符指示
扫一扫
1375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
