Vue_基础

安装

安装脚手架 VueCli：

• 卸载旧版本：cnpm uninstall vue-cli -g，
• 安装：cnpm install -g @vue/cli
• 查看安装的VueCli版本：vue --version

创建Vue项目：vue create 项目名 (项目名不能驼峰、不能中文)

基础

v-text、v-html 指令会干掉标签里的内容

v-if：元素销毁和重建实现是否显示

v-for：遍历数组<div v-for='(item,index) in arr' :key='index'>{{item}}</div>

v-for：遍历对象<div v-for='(item,key,index) in obj' :key='index'> {{item}}</div>

v-once：只渲染元素和组件一次，重新渲染时被视为静态内容跳过 <div v-once>一定不修改:{{ msg }}</div>

数组更新

调用以下方法更新了原数组，页面会自动刷新同步：

javascript push()、pop()、shift()、unshift()、splice()、sort()、reverse()

调用以下方法修改数组后返回的是新数组，原数组不会改变，视图不会刷新，想要刷新，给原数组重新赋值

java filter() 、contact() 、slice()

对象更新

修改原对象property会触发视图更新，给原来对象添加property或删除property不会触发视图更新

Vue解决办法：

javascript this.$set(this.obj,'love','游泳') // 添加love属性 this.$delete(this.obj,'love') // 删除love属性

事件

事件函数不加括号，默认第一个参数是事件对象$event，加括号则需要手动传递事件对象$event

html <button @click="youcan(1,2,$event)">点我</button>

侦听器、过滤器

侦听器

```html

```

过滤器

过滤器用于对文本进行格式化，可以用在两个地方：{{}} 和 v-bind表达式

```html

<p>过滤后的电话：{{phone | pp}}</p>   // 不传参，有一个默认值接收值

<p>过滤后的电话：{{phone | qq(msg)}}</p>

```

生命周期

数据传递

1. 父传子：Prop

2. 子传父：自定义事件，this.\$emit('自定义事件名', ' ')

3. 访问根实例new Vue，this.\$root.xx

4. 操作DOM或子组件，给标签或组件加ref标记

   ```html

   1. 获取DOM

   2. 获取子组件 this.$refs.pp获取子组件 ```

属性总结

```html

```