Vue基本使用

Vue

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

npm导入路径：https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js

MVVW架构 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内容

v-for：循环获取数组

v-for：循环获取字典

    
    
    



    

        
{{index}}:{{course}}
        

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

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

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

    
    
    



    

    
        点击弹窗
    

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

    
    
    



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

v-show：布尔值类型判断

    
    
    



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

综合案例

    
    
    



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

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

    
    
    



    
    {{username}}
    

            {{article}}
    
    

    
        阿萨德
        主线程
        权威
    
    {{choices}}
    

    
        阿萨德
        主线程
        权威
    
    {{choices_multiple}}

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

    
    
    



    
        {{username}}
    

    
    
        
{{username}}
    

    
    
        
{{username_trim}}
    

    
    {{article}}
    {{typeof article}}

自定义指令

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

方法集合

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 指令修饰符组成的对象