Vue2--入门学习
看了慕课网的教学视频，觉得挺不错的，在此做个随堂记录，有兴趣的可以去看视频
vue版本：2.5
文档链接：https://v2.cn.vuejs.org/v2/guide/installation.html
视频链接：https://www.imooc.com/video/16976
在vue官网下载开发版本的vue.js，并复制其代码到编译器中创建的vue.js文件中
然后在创建index.html文件，在head部引用这个文件，就可以了
1、第一个vue实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue入门</title> <script src="./vue.js"></script> <!--引用js库文件--> </head> <body> <div id="root"> <!--vue实例的挂载点--> <h1>{{msg}}</h1> <!--{{变量名}}:插值表达式，接收data里对应变量名的值--> </div> <script> new Vue({ //使用new创建实例 el: "#root", //接收id=root的元素，将实例与模板进行绑定 //template: '<h1>{{msg}}</h1>', 模板内容，等同于<div>里的内容 data:{ //vue实例内的数据板块 msg: "hello world" } }) </script> </body> </html>
效果展示：
2、挂载点，模板，实例之间的关系/数据，事件与方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>挂载点，模板，实例之间的关系/数据，事件与方法</title> <script src="./vue.js"></script> <!--引用js库文件--> </head> <body> <div id="root"> <!--vue实例的挂载点,里面的数据为模板内容--> <h1>hello {{msg}}</h1> <!--{{变量名}}:插值表达式，接收实例data里对应变量名的值--> <h2 v-text="content"></h2> <!--v-text：接收后面的变量值--> <h4 v-html="content"></h4> <!--与v-text的区别在于：v-html不会转义--> <div v-on:click="handleClick">{{contents}}</div> <!--鼠标点击，引发事件，方法为handleClick--> <div @click="handleClick">{{contents}}</div> <!--v-on的简写--> </div> <script> new Vue({ //使用new创建实例 el: "#root", //接收id=root的元素，将实例与模板进行绑定 data:{ //vue实例内的数据板块 msg: "hello world", content: "<h1>hello</h1>", contents: "hello" }, methods:{ //vue实例内的函数板块 handleClick: function () { //handleClick方法的具体函数 this.contents = "world" //为vue实例里data下的contents变量，重新赋值 } } }) </script> </body> </html>
效果展示：点击最下面两个hello，会变成world
3、属性绑定和双向数据绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性绑定和双向数据绑定</title> <!--单向绑定：数据决定页面的内容，但页面不可改变数据内容；双向绑定：页面亦可改变数据内容--> <script src="./vue.js"></script> </head> <body> <div id="root"> <!--<div title="this is hello world">hello world</div>;title: 鼠标放在hello world上时展示的提示语;--> <div :title="title">hello world</div> <!--v-bind:属性与数据向绑定;可缩写为:--> <input v-model="content"/> <!--v-model:模板指令，当页面的content改变时，数据data里的content也相应改变--> <div>{{content}}</div> <!--为双向绑定做验证，页面上应跟v-model的数据一致--> </div> <script> new Vue({ el:"#root", data:{ title:"this is hello world", content:"this is content" } }) </script> </body> </html>
效果展示：修改表框内的数据，其下一行会随着改变
4、计算属性与侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性与侦听器</title> <script src="./vue.js"></script> </head> <body> <div id="root"> 姓：<input v-model="firstName"/> 名：<input v-model="lastName"/> <div>{{fullName}}</div> <div>{{count}}</div> </div> <script> new Vue({ el:"#root", data:{ firstName: '', lastName: '', count: 0 }, computed:{ <!--计算属性：一个属性由其他属性计算得来；当其他属性无变化时，fullName不会变更，会使用上一次计算的缓存，只有当其他属性有变化时才变化--> fullName: function (){ return this.firstName + ' ' + this.lastName } }, watch:{ <!--侦听器，监听属性的变化--> firstName: function (){ <!--当firstName属性变化时，做下面的动作--> this.count ++ }, lastName: function (){ this.count ++ } } }) </script> </body> </html>
效果展示：随着输入姓名的次数变化，最下面的计数值也会随着增加
5、v-if,v-show,v-for指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if,v-show,v-for 指令</title> <script src="vue.js"></script> </head> <body> <div id="root"> <div v-if="show">hello world</div> <!--通过点击按钮，显示或隐藏文本；show=ture时才会显示--> <div v-show="show">hello world</div> <!--跟v-if的区别：v-show是用css标签来隐藏div，而if是直接删除此div标签，如果需要频繁显示与隐藏的话，建议使用v-show，其他用v-if--> <button @click="handleClick">toggle</button> <!--button:标记一个按钮--> <ul> <li v-for="(item, index) of list" :key="index">{{item}}</li> <!--循环获取list的数值和下标，对应变量item，index，并展示item；需要添加:key属性来提升性能，key值不能相同，若需频繁对列表进行表更，则不适用index--> </ul> </div> <script> new Vue({ el:"#root", data: { show: true, list: [1,2,3] }, methods: { handleClick: function () { this.show = !this.show; } } }) </script> </body> </html>
效果展示：点击toggle按钮，显示或隐藏hello world
6、TodoList
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TodoList</title> <script src="vue.js"></script> </head> <body> <div id="root"> <div> <input v-model="inputValue"/> <!--v-model:模板指令，双向绑定--> <button @click="handleSubmit">提交</button> <!--鼠标点击，引发事件，方法为handleSubmit--> </div> <ul> <!--使用组件，通过content 属性传递数值;@delete：监听子组件的变化--> <todo-item v-for="(item, index) of list" :key="index" :content="item" :index="index" @delete="handleDelete" ></todo-item> </ul> </div> <script> //创建一个组件：全局组件，一个组件就是一个vue实例 Vue.component('todo-item', { props: ['content','index'], //接收传递的数值，index为下标 template: '<li @click="handleClick">{{content}}</li>', methods: { handleClick: function () { //alert('clicked') //弹窗提示 this.$emit('delete',this.index) //向外触发名称为delete的事件，对应值为index，与父组件形成发布--订阅模式， } } }) //定义一个局部组件 // var TodoItem = { // template: '<li>{{item}}</li>' // } new Vue({ el:"#root", // components: { // 'todo-item': TodoItem //使用局部组件时，需绑定 // }, data: { inputValue: '', list: [] }, //若没有定义模板template，则挂载点下所有的实例为模板 methods: { handleSubmit: function () { <!--将提交的数据inputValue赋值到list中,并清空输入的值--> this.list.push(this.inputValue) this.inputValue = '' }, handleDelete: function (index) { this.list.splice(index,1) //删除list中对应下标index的数值 } } }) </script> </body> </html>
效果展示：
在页框内输入数据，点击提交，将会展示在列表中，并清空页框内的数据
鼠标点击列表数据，将会进行删除
