慕课网Vue基础知识学习笔记

2019-06-28 本文已影响0人果木山

慕课网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实例（组件）的局部组件；局部组件标签名和对象；
基础知识：
- 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"形式绑定事件；
- 若想修改DOM中的内容，只需改变VUE实例中变量内容，然后VUE会监听到变量的变化，进而修改DOM中的内容；
  - 在Vue实例中使用data中的变量，使用this.变量名调用；
  - 修改实例data中变量的内容，使用this.变量名=xxx；即可改变变量内容，进而改变DOM中的对应内容；
- v-bind:title="msg"或:title="msg"：标签的属性绑定，即给该标签绑定title属性为标签msg变量值；
  - 注：在webstrom中使用v-bind会报错，所以只能使用:title="msg";
- 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使用；
局部组件
- 定义：通过创建变量，变量值为对象，对象中设置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
- 注意：创建webpack模板项目时，不要使用eslint规则校验代码，否则会出警告；
  - 错误链接：ESlint校验的错误文档;
Vue-cli的全局样式和局部样式
- 在vue的组件中，style标签后设置scoped局部作用域标识符，为局部样式，代表指作用于该组件的样式；如果去掉标识符，为全局样式，则作用于所有组件，包括父级组件；
参考链接：慕课网vue2.5入门知识解读

慕课网Vue基础知识学习笔记

慕课网Vue基础知识学习

1.基础知识

2.组件与实例

Vue-cli插件

猜你喜欢

热点阅读