安装

• npm install -g @vue/cli
• yarn global add @vue/cli

创建

• vue create xxx
• codesandbox.io 快速创建

开启 webpack-dev-server

• yarn serve

入门属性

el-挂载点

• 可以用$mount('xxx')代替

data-内部数据

• 支持对象和函数，优先用函数（防止数据重叠影响）

methods -方法

• 事件处理函数或者是普通函数

components -组件

• Vue组件，注意大小写（文件名首字母小写，组件大写）
• 三种引入方式

四个钩子

created-实例出现在内存中

mounted-实例出现在页面中

updated-实例更新了

destroyed-实例从页面和内存中消亡了

props-外部数据

• 也叫属性
• message="n"传入字符串
• :message="n"传入this.n数据
• :fn="add"传入this.add函数

进阶属性

computed-计算属性

let id = 0
const createUser =(name,gender)=>{
	id+=1
    return {id:id, name:name , gender:gender}
}
new Vue({
	data(){
    	return {
        	users:[
            	createUser("方方","男")，
                createUser("圆圆","女")
                createUser("小新","男")
                createUser("小葵","女")
            ]，
            gender:""
        }
    },
    
    computed:{
    	displayUser(){
        	const hash={
            	male:"男",
                female:"女"
            }
            const { users,gender } = this
            if(gender === ""){
            	return users
            }else if(typeof gender ==="string"){
            	return users.filter(u=>u.gender===hash[gender])
            }else {
            	throw new Error("gender 的值是意外的值")
            }
        }
    },
    methods:{
    	setGender(string){
        	this.gender = string
        }
    },
    
    template:`
    <div>
      <div>
      <button @click="setGender('') ">全部</button>
      <button @click="setGender('male')">男</button>
      <button @click="setGender('female')">女</button></div>
      <ul>
        <li v-for="(u,index) in displayUsers" :key="index">{{u.name}} - {{u.gender}}</li>
      </ul>  
    </div>
    `
}).$mount("#app")

watch

用途

• 当数据变化时，执行一个函数 何为变化？
• 简单类型看值，复杂类型（对象）看地址 语法1

watch:{
    o1:()=>{},//别用这种，这里的this是全局对象
    o2:function(value,oldValue){},
    o3(){},
    o4:[f1,f2],
    o5:'methodName'//methods中方法
    o6:{handler:fn,deep:true,immediate:true}
    'object.a':function(){}
}

语法2

vm.$watch('xxx',fn,{deep:...,immediate:...})

deep:true

• deep的意思是，监听object的时候是否往深了看
• 如果希望对象里面的简单类型值变了，对象也被watch时用deep：true
• 如果希望对象里面的简单类型值变了，但对象不被watch用deep：false（默认）

immediate 第一次渲染是否执行