Vue的基本使用

vue正式官网(可能要)：https://cn.vuejs.org/v2/guide/

 vue菜鸟官网(可能要)：Vue.js 教程 | 菜鸟教程

vue的特点：

1.数据驱动视图：单向数据绑定 页面数据-》vue监听-》页面结构

2.双向数据绑定

MVVM:实现 数据驱动视图 双向数据绑定的核心 model（js），View（dom结构 ），ViewModel是vue的实例       

开启vue：npm run serve
 

 在js里的 components 下创建

       传入数据： 创建 data(){return{}} ，数据和true，false 可直接写 其他的要加引号

                传入的数据为json类型是使用  name_names:[{},{},{}]接收

       传入function： 创建 methods{}

    

内容渲染指令：

     v-text：用在标签中，覆盖原有内容

     {{}}： 插值表达式，直接接收数据的一种方式

     v-html:可以携带标签，识别标签

   

   

{{a_name}}

   

 属性绑定指令：

    v-bind：  可以简写为 ：

   

   

事件绑定：

    v-on:click

    @click

 不传参可以不用加括号

    单击按钮count+1

    单击+n

    单击按钮count+n

 双向数据绑定 ：      v-model

    v-model.number: 把内容转为数字类型

    v-model.trim ： 去除前后空格

    v-model.lazy 失去焦点后触发同步

条件渲染指令：

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

     v-if 和 v-show的区别：

      v-if：删除节点 达成显隐 更安全

     v-show: 增加display-none

   

优秀

   

良好

   

及格

   

及格

   

v-if区域

   

v-show区域

 列表渲染指令：

   

  v-for 里写入索引index,以便在后端使用

key :主键，增加查询效率

       

           {{index}}+{{item.id}}

           {{item.name}}

           {{item.age}}

       

 过滤器 -

    多个方法|m1|m2 

{{ message }}

   

{{ message | upperStr }}

filters:{
    upperStr(val){
      if(!val) return "";
      const first = val.charAt(0).toUpperCase();
      return first+val.slice(1);//slice截取字符串
    }
  }