Vue

Vue是遵循MVVW架构模式实现的前端框架

npm导入路径：https:///npm/vue@2.5.17/dist/vue.js

MVVM架构 Model数据 View模板 ViewModel处理数据

ES6的常用语法：

变量的定义，var，let，const

  1. Var 变量的提升，函数作用域 全局作用域，重新定义不会报错，可以重新赋值
  2. let 块级作用域 { }，重新定意会报错，可以重新赋值
  3. const 定义不可修改的常量，不可以重新赋值

箭头函数的this取决于当前的上下文环境：类似于python的匿名函数

this指当前函数最近的调用者，距离最近的调用者

解构：
字典解构 {key,key,...} 注：要使用key才行
数组结构 [x,y,.....]

    let obj = {
        a:1,
        b:2
    };
    let hobby = ["吹牛", "特斯拉", "三里屯"];
    let {a,b} = obj;
    let [hobby1,hobby2,hobby3] = hobby;
    console.log(a);
    console.log(b);
    console.log(hobby1);
    console.log(hobby2);
    console.log(hobby3);

Vue的核心思想是数据驱动视图

Vue的常用指令

v-text：获取文本内容

v-html：获取html内容

Title学习刷剧Coding"
    }
});" _ue_custom_node_="true">

v-for：循环获取数组

v-for：循环获取字典

Title{{index}}:{{course}}{{index}}:{{item.name}}:{{item.age}}:{{item.hobby}}

v-bind：自定制显示样式，动态绑定属性。

Title

v-on@事件名：事件绑定

Title点击弹窗繁琐写法-->

-->

v-if：条件判断
v-if   v-else-if    v-else

Title管理员你好查看简历没有权限

v-show：布尔值类型判断

Title管理员你好查看简历没有权限

综合案例

Title管理员你好查看简历没有权限点击显示或隐藏hello

v-model：获取数据，标签的属性设置 ，获取其属性值，用户信息等，例如input，select等

Title{{username}}{{article}}阿萨德主线程权威{{choices}}阿萨德主线程权威{{choices_multiple}}

v-model.lazy：失去光标绑定数据事件
v-model.lazy.number：数据类型的转换
v-model.lazy.trim：清除空格

Title{{username}}{{username}}
    {{username_trim}}
    {{article}}
    {{typeof article}}

自定义指令

v-自定义的函数（指令）：自定制函数（指令）
Vue.directive（）

Title

方法集合

v-text
v-html
v-for
v-if v-else-if v-else
v-bind  绑定属性
v-on     绑定事件
v-show   display
v-model   数据双向绑定
input
textarea
select
指令修饰符
.lazy
.number
.trim
自定义指令
Vue.directive（'指令名'，function(el,参数binding){ }）
el  绑定指令的标签元素
binding  指令的所有信息组成的对象
value   指令绑定数据的值
modifiers   指令修饰符组成的对象