Vue基础语法

1. 模板语法

  ## demo1.hrml
  1.1 插值
    1.1.1 文本
          {{v}}

如图：定义一个属性v

然后在边界div中调用

    1.1.2 html
          使用v-html指令用于输出html代码      

如图定义一个HTML属性（内容为:一个input标签，类型是text，值是2）:

   

然后调用它:

结果：

    1.1.3 属性
          HTML属性中的值应使用v-bind指令

如图设置了一个红色的样式:

在vue实例中定义一个属性接收它(我这里是定义了cls)： 

然后使用v-bind调用class样式

效果：

也可以用来绑定值：

将class指令换成ID

得到：

 注意此处不能使用插值！！！！

 

    1.1.4 表达式
          Vue提供了完全的JavaScript表达式支持

          {{v.substr(0,6).toUpperCase()}}

如图定义一个属性v：

然后将v的从0开始到第6位截取，大写得到

如图：

          {{ number + 1 }}

定义一个number属性，并设置初始值，

如图：

结果：

        

 

  {{ ok ? 'YES' : 'NO' }}

三元运算符，根据ok的状态为true或者false决定

          <li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

 定义一个ID：

 结果id就拼接了：

  1.2 指令
      指的是带有“v-”前缀的特殊属性

    1.2.1 核心指令

         (v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model

          v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素
            他们只能是兄弟元素
            v-else-if上一个兄弟元素必须是v-if
            v-else上一个兄弟元素必须是v-if或者是v-else-if

 

 

          v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

首先定义一个属性(flag)如图：

 然后用边界把范围确定

 效果如图：

默认是只显示这些，勾选后：

 

原理是负负得正。

 

          v-for：类似JS的遍历，
                 遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
                 遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

使用：

     

 设置数组属性：

 

效果：

 

 下拉框版：

效果： 

 

 复选框版：

设置数组属性：

 

 

实现：

 

效果：

 

带下标版（i就是下标）：

 效果：

 

    v-bind
          v-on
          v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值   
            v-for/v-model一起绑定[多选]复选框和单选框  
  
    ## demo3.html 
    1.2.2 参数
          一些指令能够接收一个“参数”，在指令名称之后以冒号表示，例如：
     
          在这里href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定 
          <a v-on:click="doSomething">...</a>
          在这里click参数是监听的事件名。

 

 
    1.2.3 动态参数

          从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数
          <a v-bind:[attrname]="url"> ... </a>

定义：

 使用：

 

          同样地，你可以使用动态参数为一个动态的事件名绑定处理函数
          <a v-on:[evname]="doSomething"> ... </a>

          注1：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写

     
    1.2.4 修饰符

          修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
          例如：.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
        
          <form v-on:submit.prevent="onSubmit">...</form>
      
          注1：event.preventDefault()方法的作用？
               该方法将通知Web浏览器不要执行与事件关联的默认动作(如果存在这样的动作)

    1.2.5 简写

          Vue为v-bind和v-on这两个最常用的指令，提供了特定简写
          <a v-bind:href="url">...</a>
          <a :href="url">...</a>
  
          <a v-on:click="doSomething">...</a>
          <a @click="doSomething">...</a> 
 

 

 

3. 过滤器
   全局过滤器
   Vue.filter('filterName', function (value) {
     // value 表示要过滤的内容
   });
   局部过滤器在Vue实例中有规定的过滤器方法
   new Vue({
     filters:{'filterName':function(value){}}
   });

局部过滤器如图：

 使用(|前面是要过滤的内容，|后是过滤器)：

 

   vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：
   <!-- 在两个大括号中 -->
   {{ name | capitalize }}

   <!-- 在 v-bind 指令中 -->
   <div v-bind:id="rawId | formatId"></div>
   
   注1：过滤器函数接受表达式的值作为第一个参数 
   注2：过滤器可以串联     
        {{ message | filterA | filterB }}
   注3：过滤器是JavaScript函数，因此可以接受参数： 
        {{ message | filterA('arg1', arg2) }}

   注4：js定义一个类
        function Stu(){};
        Stu.prototype.add(a,b){};//添加一个新的实例方法

  

 

4. 计算属性
   计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
   computed:{
       xxx:function(){
          
       }
   }

   注1：前端面试题：JS中的let和var的区别
        { 
          var i = 9;
        } 
        console.log(i);  // 9

        ES6新增的let，可以声明块级作用域的变量
        {  
          let i = 9;     // i变量只在 花括号内有效！！！
        } 
        console.log(i);  // Uncaught ReferenceError: i is not defined