慕课网Vue基础知识学习
1.基础知识
- 挂载点： el对应的id
- 模板：指的就是挂载点DOM内部的标签内容，可以在Vue实例中，设置template属性值；
- 实例参数：
-
new Vue({})：Vue实例调用，参数为对象； - 对象中的变量：
- 1）el: 赋值为id值，作为挂载点，绑定DOM标签中的元素；如
el: "#root"; - 2）template:模板；赋值为字符串类型，即作为挂载点DOM标签下的内容；若不设置该属性，则在挂载点DOM标签下的内容，作为该实例模板；
- 3）data：赋值为对象，对象中为变量键值对；用来插入到挂载点对应的DOM节点中；
- 4）methods:赋值为对象，对象中为函数方法键值对；
- 5）computed:计算属性，赋值为对象，对象中为计算属性设置；用于对data中变量进行计算；
- 6）watch:侦听器，赋值为对象；监听变量的变化，进而执行对应函数；
- 7）props:赋值为数组；数组中元素为父级元素设置的自定义属性名，用于传递给子组件参数；
- 8）components:赋值为对象；设置该Vue实例（组件）的局部组件；局部组件标签名和对象；
- 1）el: 赋值为id值，作为挂载点，绑定DOM标签中的元素；如
-
- 基础知识：
- vue数据绑定的几种方式：内容绑定；事件绑定；标签属性绑定；数据的双向绑定；
-
{{msg}}：插值表达式输出到DOM标签中，插入变量msg的内容； -
v-text="msg"：在该标签中将msg变量的值，作为纯文本插入其中； -
v-html="msg"：在该标签中将msg变量的值，作为内容插入，内容保留html样式； -
v-on:click="fn"或@click="fn"：给对应标签绑定事件，此为绑定click点击事件，fn为点击事件触发后执行的函数名；fn定义在实例参数methods中；- 注：在webstrom中使用v-on会报错，所以只能用
@click="fn"形式绑定事件；
- 注：在webstrom中使用v-on会报错，所以只能用
- 若想修改DOM中的内容，只需改变VUE实例中变量内容，然后VUE会监听到变量的变化，进而修改DOM中的内容；
- 在Vue实例中使用data中的变量，使用
this.变量名调用； - 修改实例data中变量的内容，使用
this.变量名=xxx；即可改变变量内容，进而改变DOM中的对应内容；
- 在Vue实例中使用data中的变量，使用
-
v-bind:title="msg"或:title="msg"：标签的属性绑定，即给该标签绑定title属性为标签msg变量值；- 注：在webstrom中使用v-bind会报错，所以只能使用
:title="msg";
- 注：在webstrom中使用v-bind会报错，所以只能使用
-
v-model="msg"：数据的双向绑定； -
v-show="showto"：控制DOM元素的显示与否；其中，showto为变量，值为布尔值，当为true时，会给标签元素添加一个display:block属性；当为false时，会给标签元素添加一个display:none属性；不会影响DOM树结构； -
v-if="showto：控制DOM元素的存在与否；其中showto为布尔值，为true时，标签存在，为false时，标签删除；与v-show不同的是，会影响DOM结构，会删除标签； -
v-for="(item,index) of ary：控制一组数据，通过这组数据循环显示在DOM中，根据数组的长度，遍历标签，插入DOM结构中；- 注：给遍历的标签设置一个key属性，会提升每一项的性能；key值都不能相同；
- 验证代码：
- 数据绑定和事件绑定及模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据绑定和事件绑定及模板</title> <script src="./js/vue.js"></script> </head> <body> <div id="root"> <div v-text="msg"></div> <div v-html="msg"></div> <p @click="handleclick">{{tet}}</p> <input type="text" v-model="title"/> <div :title="title">{{title}}</div> </div> <script> new Vue({ el:"#root", data: { msg:"<span>hello world</span>", tet:"点击我", title:"这是一个世界的美好" }, methods:{ handleclick:function () { //点击事件触发，修改tet内容 this.tet="已点击" } } }) </script> </body> </html>- 计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性和侦听器</title> <script src="./js/vue.js"></script> </head> <body> <div id="root"> 姓：<input type="text" v-model="firstName"/> 名：<input type="text" v-model="lastName"/> <p>{{fullName}}</p> <p>{{count}}</p> </div> <script> new Vue({ //挂载点 el:"#root", //设置变量 data:{ firstName:"", lastName:"", count: 0 }, //设置绑定的事件函数 methods:{ }, //设置计算属性； computed:{ fullName:function () { return this.firstName+"和"+this.lastName; } }, //设置侦听器，侦听变量的变化 watch:{ firstName:function () { this.count++; }, lastName:function () { this.count--; } } }) </script> </body> </html>- 模板指令：v-if,v-show,v-for
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>验证</title> <script src="./js/vue.js"></script> </head> <body> <div id="root"> <div v-if="show">标签的存在和删除</div> <div v-show="show">标签显示和隐藏</div> <button @click="handletoggle">toggle</button> <ul> <li v-for="(item,index) of textList" :key="index">{{item}}</li> </ul> </div> <script> new Vue({ el:"#root", data:{ show: true, textList:["meihao","tiankong","nihao"] }, methods:{ handletoggle:function () { this.show=!this.show; } } }) </script> </body> </html> - todoList小实例
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todoList</title> <script src="./js/vue.js"></script> <style> html,body{ font-size: 30px; } </style> </head> <body> <div id="root"> <div> <input type="text" v-model="inputValue"/> <button @click="btnClick">添加到列表显示</button> </div> <ul> <li v-for="(item, index) of listAry" :key="index">{{item}}</li> </ul> </div> <script> new Vue({ el: "#root", data:{ inputValue:"", listAry:[] }, methods:{ btnClick:function () { this.listAry.push(this.inputValue); this.inputValue=""; } } }) </script> </body> </html>
2.组件与实例
- 组件和实例的关系
- 关系：每一个组件都是一个Vue实例，一个Vue项目是通过多个Vue实例组成的；
- 在局部组件中，可以设置methods,computed等属性，即与Vue实例中的属性设置相同；
- 组件的创建和调用
- 全局组件的定义：
- 定义：调用Vue类的静态方法component，创建全局组件
- 代码
Vue.component("todo-list",{ template:"<li>xxx</li>" })；
- 代码
- 调用：使用的todo-list标签插入DOM使用；
- 定义：调用Vue类的静态方法component，创建全局组件
- 局部组件
- 定义：通过创建变量，变量值为对象，对象中设置template属性，作为局部组件的DOM模板；
- 调用：局部组件要在vue实例中调用，必须在实例中进行声明注册；即在components属性中设置局部组件调用的标签名，注：标签名不能大写；
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件的定义和调用</title> <script src="./js/vue.js"></script> <style> html,body{ font-size: 30px; } </style> </head> <body> <div id="root"> <div> <input type="text" v-model="inputValue"/> <button @click="btnClick">添加到列表显示</button> </div> <ul> <!--全局组件的调用--> <todo-item></todo-item> <!--局部组件的调用--> <do-list></do-list> </ul> </div> <script> //全局组件定义 Vue.component("todo-item",{ template:"<li>meihao</li>" }); //局部组件定义，局部组件使用父组件传递的参数 var sonItem={ template:"<li>meili</li>" }; //实例创建 new Vue({ el: "#root", //局部组件的声明，声明的name不能大写，加引号； components:{ "do-list":sonItem }, data:{ inputValue:"", listAry:[] }, methods:{ btnClick:function () { this.listAry.push(this.inputValue); this.inputValue=""; } } }) </script> </body> </html> - 全局组件的定义：
- 父组件与子组件之间传递数据
- 父组件向子组件传递数据：通过在子组件上设置自定义属性，来传递参数；
- 父组件：定义传递给子组件的变量参数；
- 子组件：
- 子组件标签中设置自定义属性，属性值为父组件传递给子组件的参数值；
- 子组件实例对象中设置props属性，属性值为数组，数组元素为子组件标签上设置的自定义属性名；
- 在子组件template模板中，在标签中，通过
{{}}插入props接收的自定义属性名，进而获取父级组件传递的参数； - 设置了props属性后，相当于给子组件设置了两个data变量；可以在对象中通过
this.自定义属性名获取传递的参数；但是，若修改传递的参数，会报错；
- 子组件向父组件传递数据参数
- 子组件通过订阅发布的形式向父组件传递数据；
- 父组件通过给子组件标签设置自定义属性，属性值为函数体；
- 子组件通过事件触发后，在函数体内调用执行父组件传递来的函数体，并向其传递子组件中的数据，进而在父组件中获取到该数据；然后进行其他操作；
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父组件与子组件之间传递参数实例</title> <script src="./js/vue.js"></script> <style> html,body{ font-size: 30px; } </style> </head> <body> <div id="root"> <!--root挂载点下的所有标签，作为父级组件的模板--> <div> <input type="text" v-model="inputValue"/> <button @click="btnClick">添加到列表显示</button> </div> <ul> <!--其中todo-item作为子组件，绑定标签自定义属性，传递父级组件变量item--> <todo-item v-for="(item,index) of listAry" :key="index" :content="item" :index="index" :sondata="sonClick"></todo-item> </ul> </div> <script> Vue.component("todo-item",{ props: ["content","index","sondata"], //在子组件模板中调用content，即获取父级组件传递的参数 //在子组件模板中绑定自己的click事件，触发后，执行父组件传递的函数体，并传递数据； template:"<li @click='deleteData'>{{content}}</li>", methods:{ deleteData:function () { this.sondata(this.index); } } }); new Vue({ el: "#root", data:{ inputValue:"", listAry:[] }, methods:{ btnClick:function () { this.listAry.push(this.inputValue); this.inputValue=""; }, //创建父组件向子组件传递的函数体，接收子组件传递的数据 sonClick:function (index) { this.listAry.splice(index,1); } } }) </script> </body> </html> - 父组件向子组件传递数据：通过在子组件上设置自定义属性，来传递参数；
Vue-cli插件
- Vue-cli(2.x)旧版安装与使用
- 前提：下载node.js
- 命令：
- 1）全局安装：
npm install --global vue-cli;下载的版本为旧版本2.x；- 卸载：
npm uninstall -g vue-cli;
- 卸载：
- 2）创建一个基于webpack模板的新项目：
vue init webpack my-project - 3）安装完毕后，进入创建的项目文件：
cd my-project - 4）运行服务器：
npm run dev
- 1）全局安装：
- 注意：创建webpack模板项目时，不要使用eslint规则校验代码，否则会出警告；
- 错误链接：ESlint校验的错误文档;
- Vue-cli的全局样式和局部样式
- 在vue的组件中，style标签后设置scoped局部作用域标识符，为局部样式，代表指作用于该组件的样式；如果去掉标识符，为全局样式，则作用于所有组件，包括父级组件；
- 参考链接：慕课网vue2.5入门知识解读
