vue基本指令笔记

vue基本指令笔记

了解vue框架

• 渐进式框架
• 作用：简化原生dom操作、事件绑定，vue使我们只需要关注数据变化
• 不支持IE8以下
• 略

第一部分: 基本指令

1. v-text

2. v-html

3. v-show：添加display:none;属性

4. v-if：是否渲染当前dom节点

5. v-else

6. v-else-if

7. v-for：

   <!-- 遍历数组 -->
   <li v-for="(velue,index) in arr">{{item}}</li>
   <!-- 遍历对象 -->
   <li v-for="(velue,key,index) in arr">{{item}}</li>
   

8. v-on

   1)v-on:事件=”函数“

   2)v-on="{事件:函数}"

   • 简写：如@click=""
   • v-on="{click:onclick,mouseenter:ondeg}" 绑定多个事件
   • 键盘事件：@keyup.13或@keyup.enter
   • @submit.stop.prevent 阻止事件冒泡

9. v-bind

   1)v-bind:属性=“变量”

   2)简写 :属性=""

   2)用布尔值动态绑定class：@class="{类名:布尔，类名:布尔}"

   3)用数组：[“clacc1”,“clacc2”]

10. v-model：对应input里的value

11. v-pre：表示这是静态的内容，不需要动态绑定数据

12. v-cloak：解决网络加载js导致的屏幕闪动

13. 事件.once：事件只触发一次

14. {{var}}：插值符号

    *注:*反引号``被识别为字符串，里边${var}表示变量，指令(标签属性)的值被解析为Vue的变量

第二部分: vue的动态绑定

1. 调用Vue构造函数

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

new Vue({
    
});

2. el属性：类似于querySelector()

3. data属性：放绑定数据，只认地址，地址变了视图才会刷新文档：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新

4. watch:数据监听

5. methods：专门存放事件(注意是method+s)

6. filters:存放数据处理的方法

   {{value | func}}
   
   new Vue({
       filters:{
           func:(value)=>{
           	//处理数据
               return value;
       	}
       }
   });
   

7. computed： 数据处理

8. component：局部组件

   new Vue({
       component:{
           nav:{
               template:``,
               data:0
           }
       }
   })
   

9. template:选项模板

第三部分: 全局API

Vue原型对象上的方法,组件注册

1. $set(数组/对象，index/键，值)：更改绑定的数据，刷新视图，还可以增加属性

2. delete : 删除对象或数组属性，如果对象是响应式，删除可触发试图更新

3. directive:添加自定义指令，例:

   Vue.directive("hello",function(el,binding,vnode){
   	el.style["color"]= binding.value;
   })
   

4. Vue.component()：注册全局组件

Vue.component("name",{
    template:``,
    data:{
        
    }
})

5. extend：封装自定义全局组件

第四部分: 组件开发

1. vue全家桶：vue-cli + vue2.0 + vuex + vue-router + axios + element-ui

2. 组件component

3. 模板template

4. prop，单项数据流：

   所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
   每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop

第四部分: 脚手架

区别

1. 3.0以上有图形界面：vue ui

环境：

1. node环境
2. 可以选择安装cnpm淘宝包管理，yarn
3. 安装 包：npm i(install)
4. 卸载：npm uninstall
5. webpack包：$ npm i webpack-cli -g
6. vue-cli(vue脚手架)：
   • 3.0<：npm i vue-cli -g
   • >3.0：npm install -g @vue/cli

项目

创建

1. 创建项目：vue init webpack 项目名

   3以上：vue create 项目名

2. to get start：

   • ❤️.0：cd myVuePro npm run dev
   • >3.0：npm run serve

3. 退出：Ctrl+C

第四部分: 生命周期

钩子函数

beforeCreate()

• 实例刚刚创建，元素dom还没被初始化，暂时不知道这个周期里的操作

created()

• 数据data初始化完成，方法也可以调用，可以在这时改变数据，占用处理时间过多会导致页面空白