xiaohan_zhang
xiaohan_zhang

Vue基本使用

vue的安装

  1. CDN引入
    开发环境版本，包含了有帮助的命令行警告

    生产环境版本，优化了尺寸和速度

  2. 方式二：下载和引入
    开发版本：https://cn.vuejs.org/js/vue.js
    生产版本：https://cn.vuejs.org/js/vue.min.js

  3. 方式三：NPM安装
    $ npm install vue

  • vue实例传入的options
    el:
    类型：string | HTMLElement
    作用：决定之后Vue实例会管理哪一个DOM
    data:
    类型：Object | Function（组件中data必须是一个函数）
    作用：Vue实例对应的数据对象
    methods：
    类型：{[key:string]:Function}
    作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用
数据传递
  • 数据的单向传递
    把数据交给vue实例对象，实例对象将数据交给界面

    {{ message }}
常用指令
  • v-once
    只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

    
原始数据：{{ message1 }}

    
当前数据：{{ message1 }}
  • v-html
    更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
    会按照html格式进行解析。
  • v-pre
    跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

  
{{message}}

  
{{message}}
  • v-cloak
    某些情况，浏览器可能会直接显示未编译Mustache标签，可以使用 v-cloak 指令来解决这一问题。需要配合css使用。
    这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。




    
{{ message2 }}
  1. 绑定类名
    v-bind绑定class注意事项：
    (1) 类名要放到{}或[]中;
    (2) 类名要加引号;
    (3) 绑定类名时，可以使用三目运算符实现按需绑定；
    (4) 绑定类名时，可以通过对象来决定是否需要绑定;
  




  

  
{{message}}

  
{{message}}


  
{{message}}

  
{{message}}
  1. 绑定样式
    v-bind绑定style注意事项：
    (1) 将样式代码赋值到对象中，给style属性赋值，取值必须用引号；
    (2) 样式如果带'-'，也必须用引号，如'font-size'，没有'-'的style属性也可以加引号;


  
{{message}}

  
{{message}}

  
{{message}}

  
v-bind绑定style，通过model中的对象

  
v-bind绑定style，通过model中的对象



  
{{message}}
  • 计算属性
  1. 基本使用
    只要返回的结果没有变化，计算属性只会被执行一次。


  
{{firstName + ' ' + lastName}}

  
{{firstName}} {{lastName}}

  
{{getFullName()}}


  
{{fullName}}
  1. 计算属性的复杂操作
总价格:{{totalPrice}}
  1. 计算属性setter和getter
  • v-on
  1. v-on的使用
    作用：绑定事件监听器
    缩写：@
    预期：Function | Inline Statement | Object
    参数：event

  
{{counter}}
  1. v-on参数
    如果调用的方法不需要额外参数，那么方法后的()可以不添加，如果方法本身有一个参数，那么会默认将原生事件event参数传递进去
    如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件
  1. v-on的修饰符
    .once - 只触发一次回调
    .prevent - 调用 event.preventDefault() ，阻止默认行为
    .self - 只有当前元素本身触发事件时，才执行回调函数
    .stop - 调用 event.stopPropagation()，阻止事件冒泡
    .capture - 添加事件侦听器时使用 capture 模式
    .native - 监听组件根元素的原生事件
    .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调


  
aaaaaaaaa
  • v-if
    如果取值是true就渲染元素，否则就不渲染元素。（如果条件不满足，不会创建这个元素）
    v-if 可以从模型中获取元素，也可以直接赋值一个表达式。
    v-else 前面必须有 v-if 或者 v-else-if ;
    v-if 和 v-else 中间不能插入其它内容；
  

    
abc

    
abc

    
abc

  

  
isShow为false时，显示


  
优秀

  
良好

  
及格

  
不及格
  • v-show
    如果取值是true就渲染元素，否则就不渲染元素。
    v-if 和 v-show 区别：
    v-if: 只要取值是false，就不会创建元素；
    v-show: 取值为false也会创建元素，会设置元素的display为none；

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

  • v-for

格式：
v-for="item in movies"
v-for="(item, index) in movies"
v-for="(value, key) in obj"

官方推荐在使用v-for时，给对应的元素或组件添加上一个:key属性
key的作用主要是为了高效的更新虚拟DOM

    

        
    
            
  • {{item}}
    • 
        

        


        
    
            
  • {{index}}----------{{item}}
    • 
        

        


        
    
            
  • {{key}}----------{{value}}
    • 
        


        
    
            
  • {{item}}
    •
  • v-model
    可以用 v-model 指令在表单 、