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

慕课网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值都不能相同；
• 验证代码：
  • 数据绑定和事件绑定及模板

   
   
   
       
       
       
   
   
   
  
       
  
       
  
       
  {{tet}}
       
       
  {{title}}
   
   
   
   
  

  • 计算属性和侦听器

   
   
   
       
       
       
   
   
   
  
       姓：
       名：
       
  {{fullName}}
       
  {{count}}
   
   
   
   
  

  • 模板指令：v-if,v-show,v-for

   
   
   
       
       
       
   
   
   
  
       
  标签的存在和删除
       
  标签显示和隐藏
       toggle
       
  
           
  {{item}}
       
   
   
   
   
  

• todoList小实例
  • 代码：

   
   
   
       
       
       
       
   
   
   
  
       
  
           
           添加到列表显示
       
       
  
           
  {{item}}
       
   
   
   
   
  

2.组件与实例

• 组件和实例的关系
  • 关系：每一个组件都是一个Vue实例，一个Vue项目是通过多个Vue实例组成的；
  • 在局部组件中，可以设置methods,computed等属性，即与Vue实例中的属性设置相同；
• 组件的创建和调用
  • 全局组件的定义：
    • 定义：调用Vue类的静态方法component，创建全局组件
      • 代码Vue.component("todo-list",{ template:"
      • xxx
      " })；
    • 调用：使用的todo-list标签插入DOM使用；
  • 局部组件
    • 定义：通过创建变量，变量值为对象，对象中设置template属性，作为局部组件的DOM模板；
    • 调用：局部组件要在vue实例中调用，必须在实例中进行声明注册；即在components属性中设置局部组件调用的标签名，注：标签名不能大写；
  • 代码：

   
   
   
       
       
       
       
   
   
   
  
       
  
           
           添加到列表显示
       
       
  
           
           
           
           
       
   
   
   
   
  

• 父组件与子组件之间传递数据
  • 父组件向子组件传递数据：通过在子组件上设置自定义属性，来传递参数；
    • 父组件：定义传递给子组件的变量参数；
    • 子组件：
      • 子组件标签中设置自定义属性，属性值为父组件传递给子组件的参数值；
      • 子组件实例对象中设置props属性，属性值为数组，数组元素为子组件标签上设置的自定义属性名；
      • 在子组件template模板中，在标签中，通过{{}}插入props接收的自定义属性名，进而获取父级组件传递的参数；
      • 设置了props属性后，相当于给子组件设置了两个data变量；可以在对象中通过this.自定义属性名获取传递的参数；但是，若修改传递的参数，会报错；
  • 子组件向父组件传递数据参数
    • 子组件通过订阅发布的形式向父组件传递数据；
    • 父组件通过给子组件标签设置自定义属性，属性值为函数体；
    • 子组件通过事件触发后，在函数体内调用执行父组件传递来的函数体，并向其传递子组件中的数据，进而在父组件中获取到该数据；然后进行其他操作；
  • 代码：

   
   
   
       
       
       
       
   
   
   
  
       
       
  
           
           添加到列表显示
       
       
  
           
           
       
   
   
   
   
  

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入门知识解读