1.1 Vue 挂载点，模板与实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!--1 挂载点、模板，实例之间的关系--> <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980--> <!--2 这里的id='app'就是挂载点--> <div id="app"> <!--3 在挂载点之内的这些内容都称之为模板--> <h1>hello {{msg}}</h1> </div> <script> //var app 就是实例 var app = new Vue({ el: '#app',//2 指向挂载点 template:'<h2>hello2 {{msg}}</h2>',//3 也可以将模板的内容放到 template内，页面上就不需要模板了 data: { msg: '5555' } }); </script> </body> </html>
1.2 Vue实例中的数据，事件和方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980--> <!--1 这里的{{}}称之为 插值表达式--> <h1>hello {{msg}}</h1> <!--2 v-text是Vue中的一个指令，这个指令代表h1中的内容是Vue实例中text变量的内容--> <div v-text="text"></div> <!--3 v-text与v-html的区别是：v-text不会解析html，v-html 会解析html--> <div v-html="text"> </div> <!--4 v-on:代表在这个模板上绑定一个事件,绑定什么事件，就在v-on:后面添加具体的事件--> <!--4.1 具体的事件是写在实例methods方法里--> <div v-on:click="handleClick('ddss')"> {{context}} </div> <!--4.2 v-on可以简写为@--> <div @click="handleClick('ddss')"> {{context}} </div> <!--Vue吸引人的地方就是：我们不是面向DOM编程，而是面向数据编程--> </div> <script> var app = new Vue({ el: '#app', data: { msg: '5555', text: '<span style="color:red">5555</span>', context: 'hello', }, methods: { handleClick: function (a) { // alert(a);//'ddss' this.context = "2222"; } } }); </script> </body> </html>
1.3 Vue中属性绑定和双向数据绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>属性绑定和双向数据绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980--> <div title="this is hello world">hello world</div> </div> <div id="app1"> <!--1 属性绑定：v-bind--> <!--1.1 属性绑定： v-bind代表 当前这个属性与谁绑定，是与titleData数据项绑定，一旦使用v-bind则属性值代表的是js表达式v-bind可以缩写为:--> <div v-bind:title="'一旦用v-bind,这里是JS表达式'+titleData">hello world</div> </div> <div id="app2"> <!--1.2 属性绑定 v-bind可以缩写为: --> <div :title="titleData">hello world</div> </div> <div id="app3"> <!--2 双向数据绑定:v-model --> <!--双向数据绑定是指：当页面中的内容发生改变，则Vue实例中的数据也发生改变--> <div :title="titleData">hello world</div> <input v-model="context" /> <div > {{context}} </div> </div> <script> var app = new Vue({ el: "#app", data: { title: "this is hello world" } }); var app1 = new Vue({ el: "#app1", data: { titleData: "this is hello wordss" } }); var app2 = new Vue({ el: "#app2", data: { titleData: "ddssss" } }); var app3 = new Vue({ el: "#app3", data: { titleData: "", context:"this is context" } }); </script> </body> </html>
1.4 Vue中的计算属性和侦听器
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue中的计算属性和侦听器</title> <!--1 引入Vue库--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980--> 姓:<input v-model:value="firstName" /> 名:<input v-model:value="lastName" /> <div> {{fullName}} </div> <div> {{count}} </div> </div> <script> var app = new Vue({ el: "#app", data: { firstName: '', lastName: '', count:0 }, computed: {//1 computed 是Vue中的计算属性,如果内容没有改变，则取上一次的计算结果，所以速度很快 fullName: function () { return this.firstName + ' ' + this.lastName; } }, watch: {//2 watch侦听器 //监听fullName变化，一旦该fullName变化，则执行方法中内容 fullName: function () { this.count++ } } }); </script> </body> </html>