vue的一些基本语法

vue

容器的简单数据绑定

el的第一种写法

el还有另外一种绑定方法

data的函数式写法

v-bind让属性变成js变量

• 可以简写为 :

数据绑定

• v-bind是单向数据绑定（data流向页面）
• v-model是双项数据绑定（就是页面数据改变，data也会改变 ）
• v-model只能应用在表单类元素上，就是存在value那种（简写可以省略value）

Object.defineProperty（）

const object1 = {};

Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false //控制属性可以被修改  最后一个是配置项
});

object1.property1 = 77;
// Throws an error in strict mode 默认不可以被遍历 

console.log(object1.property1);
// expected output: 42

关于配置项更多属性前往

Object.defineProperty（） - JavaScript |多核 (mozilla.org)

var number=18

var person={
name:"zhu"
}
Object.defineProperty(person,'age',{
get(){
return number   //每当我们读取person的时候都会返回number的实时数据 就是number改变 person里面也会改变
}
    set(value){
//当age的值被调用的时候就会调用set  并且会返回修改值
}
})

以上常常应用于vue的数据代理比如vue里的data里name和name的差别

绑定事件

v-on

v-on：click也可以简写为@click

点击传递数据

//使用vue传递数据
@click="showinfo($event,66)"
//js
showinfo(event,num){
console.log(num) //66
}

事件修饰符

vue给的几种修饰符

capture是把事件触发改成捕获阶段

使用方法是

键盘事件

• keydown按下去就触发
• keyup按下去抬起来才触发

vue给常用按键起的别名

即只有按下相应按键才会触发相应方法

计算属性

methods实现

函数可以作为一个参数使用

computed计算属性的实现

在对象中调用get函数，当第一次调用的计算属性的时候，数据会进入缓存，数据再次变化的时候get才会再次被调用

计算属性简写

可以直接写成函数

监视属性

当ishot数据发生改变时，handler函数执行并且返回原来的值和更新后的值，也是可以监视计算属性

深度监视

加上deep可以监视多级结构中属性的变化

输入‘number.a’可以单独监视a属性

绑定样式

calss样式绑定

字符串变量绑定

数组绑定

对象绑定

条件渲染

v-if

v-show

列表渲染

v-for="e in arr" //其中e代表数组的没一项  还要记得绑定key   如:key="e.id" 也可以绑定index   :key="index"
//可以直接{{e}}在html里使用

遍历数组

遍历对象

对象绑定的key是对象的属性

绑定index并不是好的选择

vue.set()

vue.set(target,key,val)

• target追加属性的对象
• key追加属性的名字
• val属性值

如果使用该方法的是数组，那么key是元素下标

vue自定义指令

在Vue的directives中定义指令

比如以下的v-big指令

在vue中

完整的写法

生命周期

beforeCreate

函数里面不能调用data和method

created

可以调用data和method

beforeMount

虚拟dom插入页面之前，对dom的操作不奏效

mounted

就是第一次渲染完成

****

组件

脚手架

在终端输入

npm install -g @vue/cli
//再切换到你想要创建的目录
vue create 文件名
进入文件夹中，启动目录
npm run serve

创建vue文件

)

man.js

脚手架的个性化

//脚手架的默认配置导出js文件
vue inspect > output.js

ref属性

scoped样式

这样子就不会出现样式冲突的情况