VUE基本语法（非官方版）

VUE基本语法（非官方版）

1、VUE特性

1）灵活、易用框架

2）组件

3）渐进式框架

2、VUE安装

Npm方式：

1）下载淘宝npm镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

可以使用cnpm

2）安装vue

cnpm install vue

3）安装vue-cli

cnpm install --global vue-cli

4）创建一个基于 webpack 模板的新项目

vue init webpack my-project

一路回车（填写项目信息）

5）cd my-project

cnpm install

cnpm run dev

 

3、条件语句

v-if

v-else

v-else-if

v-show : 根据条件来展示信息

4、循环语句

语法：

v-for=”var  in  items”

 

var：元素迭代别名

Items : 数组、对象、整数

 

例子：

数组：

sites : [

{name:’lihua’},

{name:’lili’}

]

 

<li v-for="site in sites"> {{ site.name }} </li>

 

对象：

object:{name:’hu’,age:13}

<li v-for="value in object"> {{ value }} </li>

 

展示：key-value

<li v-for="(value, key) in object"> {{ key }} : {{ value }} </li>

 

整数：

<li v-for="n in 10"> {{ n }} </li>

5、计算属性和方法属性

计算属性关键字：computed

new Vue{

el：

data：

computed：{

计算名:function(){

 

}

}

}

 

方法属性关键字：methods  

 

computed 有缓存功能；

methods没有缓存功能，每次使用都重新加载

6、事件处理器

事件监听：v-on指令

 

1）<button v-on:click="counter += 1">增加 1</button>

 

2）v-on 可以接收一个定义的方法来调用：

<button v-on:click="greet">Greet</button>

 

new Vue({

greet: function (event) {}

})

 

事件修饰符：处理 DOM 事件细节

· .stop

· .prevent

· .capture

· .self

· .once

按键修饰符：监听键盘事件时添加按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() --><input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 --><input v-on:keyup.enter="submit"><!-- 缩写语法 --><input @keyup.enter="submit">

7、表单

双向数据绑定：v-model指令

 

根据控件类型自动选取正确的方法来更新元素：

单选框

复选框

下拉列表

 

3个修饰符：

.lazy

默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步

.number

自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）

.trim

自动过滤用户输入的首尾空格

 

8、组件

1）是vue最强大的功能之一

2）扩展 HTML 元素，封装可重用的代码，相当于自定义标签

 

语法：

Vue.component(tagName, options)            //全局组件

tagName 为组件名，options 为配置选项

使用：<tagName ></tagName >

 

全局组件：

所有实例都可使用；

 

局部组件：

只能在这个实例中使用；

new Vue({

el: '#app',

components: {

// <runoob> 将只在父模板可用

'runoob': Child

}

})

 

Prop:传递父组件数据给子数据

动态Prop:

v-bind:参数

 

自定义事件：

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

 

9、监听属性

关键字：watch

例子：

监听输入框输入内容

10、样式绑定

1）class属性绑定

2）内联样式

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">6666</div>

 

 

10、路由传参

传递参数的方法：

1.Params

由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。

path - query name - params

 

及通过路由配置的name属性访问

在路由配置文件中定义参数：

{ path: '/describe', name: 'Describe', component: Describe }

 

通过name获取页面，传递params：

this.$router.push({ name: 'Describe', params: { id: id } })

 

在目标页面通过this.$route.params获取参数：

this.$route.params.id

 

2.Query

页面通过path和query传递参数，该实例中row为某行表格数据

this.$router.push({ path: '/describe', query: { id: id } })

 

路由配置：

{ path: '/describe', name: 'Describe', component: Describe }

 

在目标页面通过this.$route.query获取参数：

this.$route.query.row.xxx 注意：在子组件中 获取参数的时候是$route.params 而不是$router 这很重要~~~

 

 11、：formatter

参数只能传 整行数据：row

 

12、Vue+ElementUI踩坑 _self.$scopedSlots.default is not a function

页面中多个table，且table的列数不一样，使用v-if 来控制显示

点击头部的“未使用、已使用”来切换的时候，报错。

原因：因为表格是element-ui通过循环产生的，而vue在dom重新渲染时有一个性能优化机制，就是相同dom会被复用，这就是问题所在，所以，通过key去标识一下当前行是唯一的，不许复用，就行了

• 网传的两个解决方法：

v-if v-else-if v-else 改为v-show（亲测有用）

el-table上每个el-table-column加 :key="Math.random()" (亲测有用）

 

 

 

问题

1）VUE首次加载页面慢且会有长时间的白屏

原因1：由于vendor.js和app.css较大，UI渲染线程并不会优先加载他俩，但是VUE等主流的单页面框架都是js渲染html body的,所以必须等到vendor.js和app.css加载完成后完整的界面才会显示。

原因2：还有一个原因就是单页面首次会把所有界面和接口都加载出来，会有多次的请求和响应，数据不能马上加载。

 

解决：

1）gzip压缩vendor.js和app.css；cdn加载优化

2）懒加载

 

参考：https://www.cnblogs.com/ruanraun/p/vendor.html