一：简介
- 是一个构建用户界面的框架
- 是一个轻量级的MVVM（Model-View-ViewModel），其实就是所谓的数据的双向绑定
- 数据驱动和组件化的前端开发
- 通过简单的API就能实现响应式的数据绑定和组合的视图组件
- 兼容性
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。
但它支持所有兼容 ECMAScript 5 的浏览器。
二：直接使用<script>标签引入，实现HelloWorld
- 直接下载并用
<script>标签引入，Vue会被注册为一个全局变量。 - 下载开发版本包
下载后是一个vue.js文件
- 下面我们直接导入到VS code中,并且新建一个index.html文件
- 在index.html引入vue.js，并且实现Hello World
效果：
- 使用vue实现每两秒改变hello world的内容
可以发现我们不需要获取div标签去重新复制，直接改变vue中的content值即可，页面上
的数据会自动刷新。
三：实现toDoList(v-model,v-for,v-on)操作
- 代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> <!--引入vue.js文件--> <script src="./vue.js"></script> </head> <body> <!--通过两个花括号获取vue实例中的数据--> <div id="app"> <!--定义一个v-model,这个是一个数据双向绑定,和vue实例中的inputValue一致， 当这个input框里面的数据发生变化时，vue实例中data中的inputValue变量也会发生改变， 同理当vue实例中data中的inputValue变量发生变化，这个input框中数据也发生变化 --> <input type="text" v-model="inputValue"/> <!--定义一个点击事件--> <button @click="handlerBtnClick">提交</button> <ul> <!--使用v-for循环获取list数组中的数据--> <li v-for="item in list">{{item}}</li> </ul> </div> <script> var app = new Vue({//创建一个vue的实例，里面的都是一些配置项 el:'#app',//这个表示这个vue实例管理的是id为app的div区域范围 data:{//在data里面定义一些数据 list:[],//定义一个list数组 inputValue:'' }, methods: {//在这里定义app标签里面的方法 handlerBtnClick:function(){//定义点击事件 this.list.push(this.inputValue); this.inputValue = ''; } }, }); </script> </body> </html> - 效果，每次输入框中的数据，通过提交都会展示在下面列表中
四：MVVM设计模式
- 简介
以上图中可看出三者之间的关系；可以将ViewMode看作是Model和View的连接桥，
View可以通过事件绑定Model，Model可以通过数据绑定View，通过ViewMode可以
实现数据和视图的完全分离。
五：使用组件改造TodoList
- 全局组件实现代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> <!--引入vue.js文件--> <script src="./vue.js"></script> </head> <body> <div id="root"> <div> <!--定义一个v-model,完成数据双向绑定--> <input type="text" v-model="inputValue"/> <!--定义一个点击事件--> <button @click="handlerBtnClick">提交</button> </div> <ul> <!--引用我们定义的组件,将大写字母前面变成杠, 并且使用v-bind将数据值渲染到模板中 --> <todo-Item v-bind:content="item" v-for="item in list"></todo-Item> </ul> </div> <script> //创建一个全局组件,组件名称是TodoItem Vue.component("TodoItem",{ props:['content'],//接受上面返回数据的变量值，也就是模板的内容 template:"<li>{{content}}<li>"//在组件里面创建一个模板 }); var app = new Vue({//创建一个vue的实例，里面的都是一些配置项 el:'#root',//这个表示这个vue实例管理的是id为app的div区域范围 data:{//在data里面定义一些数据 inputValue:'', list:[] }, methods: {//在这里定义app标签里面的方法 handlerBtnClick:function(){//定义点击事件 this.list.push(this.inputValue); this.inputValue = ''; } }, }); </script> </body> </html> - 局部组件实现代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> <!--引入vue.js文件--> <script src="./vue.js"></script> </head> <body> <div id="root"> <div> <!--定义一个v-model,完成数据双向绑定--> <input type="text" v-model="inputValue"/> <!--定义一个点击事件--> <button @click="handlerBtnClick">提交</button> </div> <ul> <!--引用我们定义的组件,将大写字母前面变成杠, 并且使用v-bind将数据值渲染到模板中 --> <todo-Item v-bind:content="item" v-for="item in list"></todo-Item> </ul> </div> <script> //创建一个局部组件,组件名称是TodoItem var TodoItem = { props:['content'],//接受上面返回数据的变量值，也就是模板的内容 template:"<li>{{content}}<li>"//在组件里面创建一个模板 }; var app = new Vue({//创建一个vue的实例，里面的都是一些配置项 el:'#root',//这个表示这个vue实例管理的是id为app的div区域范围 components:{//将局部组件注入到vue实例中去 TodoItem:TodoItem }, data:{//在data里面定义一些数据 inputValue:'', list:[] }, methods: {//在这里定义app标签里面的方法 handlerBtnClick:function(){//定义点击事件 this.list.push(this.inputValue); this.inputValue = ''; } }, }); </script> </body> </html> - 效果
六：简单的组件之间的传值
- 代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> <!--引入vue.js文件--> <script src="./vue.js"></script> </head> <body> <div id="root"> <div> <!--定义一个v-model,完成数据双向绑定--> <input type="text" v-model="inputValue"/> <!--定义一个点击事件--> <button @click="handlerBtnClick">提交</button> </div> <ul> <!--引用我们定义的组件,将大写字母前面变成杠, 并且使用v-bind将数据值渲染到模板中, 监听子组件中的delete方法，一旦delete方法被触发， 就会触发父组件中的handleItemDelete方法 注意：v-bind:content="item"可以简写为:content="item" --> <todo-Item v-bind:content="item" v-bind:index="index" v-for="(item,index) in list" @delete="handleItemDelete"> </todo-Item> </ul> </div> <script> //创建一个局部组件,组件名称是TodoItem var TodoItem = { props:['content','index'],//接受上面返回数据的变量值，也就是模板的内容 template:"<li @click='handleItemClick'>{{content}}<li>",//在组件里面创建一个模板 methods:{ handleItemClick:function(){//在这里定义模板中的点击事件 //向外父组件触发todo-Item标签中delete方法,并且将index下标传给父组件 this.$emit("delete",this.index); } } }; var app = new Vue({//创建一个vue的实例，里面的都是一些配置项 el:'#root',//这个表示这个vue实例管理的是id为app的div区域范围 components:{//将局部组件注入到vue实例中去 TodoItem:TodoItem }, data:{//在data里面定义一些数据 inputValue:'', list:[] }, methods: {//在这里定义app标签里面的方法 handlerBtnClick:function(){//定义点击事件 this.list.push(this.inputValue); this.inputValue = ''; }, handleItemDelete:function(index){//接收子组件传递过来的index下标数据 //方法用于删除、替换、添加数组中的元素 //下面的方法是删除 -> 从下标为0开始,长度为1 this.list.splice(index,1); } }, }); </script> </body> </html> - 实现效果
3165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
