vue基础-1

vue是一套渐进式框架

vue两个重要的特点：数据驱动 和 组件化开发

• 数据驱动 ： 没有dom操作，自动渲染数据

• 组件开发 ： 元素复用

插值表达式

{{ }} : 插值表达式，

• (1) 插值表达式作用：将数据渲染到页面

• (2) 支持二元运算 {{ age + 1 }}

• (3) 支持三元运算 {{ age>30?'老男人':'小鲜肉' }}

• (4) 支持数组与对象的取值语法

• (5) 不支持分支语法与循环语法

vue指令

Vue指令的本质是 ： Vue为HTML标签新增的一些属性

 v-text 指令
    a.作用： 设置元素的文本 innerText
    b.与插值表达式区别
        v-text 设置元素的文本，如果元素有文本，则会覆盖现有的文本
        {{ }}  只会替换当前位置文本

 v-html 指令
 作用： 设置元素的innerHTM

v-on  指令
        a.作用： 给元素绑定事件
        b.语法： 
            标准语法：     v-on:事件名 = "方法名"
            简洁语法：     @事件名 = "方法名"
        c.注意点
            事件名就是原生事件名去掉on
            事件方法定义在vue实例的methods对象中

vue事件传参

        1.vue中每一个事件方法都有一个默认参数 ， 就是事件对象

        2.如果主动给事件传参，则传递的参数 会 覆盖默认参数

        3.如果希望同时传入事件对象 + 自定义参数，则可以使用 $event

    v-on:click="doClick($event,自定义参数)"

  事件修饰符
 a.作用： 限定事件触发行为（例如阻止冒泡，阻止默认行为等）
 b.语法： @事件名.修饰符 = "方法名"

  v-bind 指令
        a.作用： 设置HTML标签原生属性的值
        b.语法： 
            标准语法：     v-bind:原生属性名 = "属性值"
            简洁语法：     :原生属性名 = "属性值"

 

vue样式绑定

v-bind:class="{ '类名': bool, '类名': bool ......}"
                如果值为true 该类样式就会被应用在元素身上, false则不会
                注意点：如果类名有 - ，则需要使用引号包起来

  v-for 指令
        (1)作用：遍历数组，并重复生成对应长度的相同标签
        (2)语法： v-for="item in 数组名"
            遍历下标：   v-for="(item, index) in items"
        (3)细节： 这个指令写在哪一个元素身上，就重复生成哪一个元素

 v-model 指令
            (1)作用 ： 双向数据绑定
                a. 表单元素的值进行了修改，这个变量的值也会跟着修改
                b. 这个变量的值进行了修改，表单元素的值也会跟着修改
            (2)语法：  v-model="变量名"
            (3)注意点： 
                a.   v-model只能用于表单元素
                b.   变量名要定义在data对象中