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:可以携带标签，识别标签

    <div v-text="a_name"></div>

    <div> {{a_name}}</div>

    <div v-html="a_name"></div>

 属性绑定指令：

    v-bind：  可以简写为 ：

   <input type="text" v-bind:placeholder="b_name">

    <img src="../src/assets/logo.png" alt="" :width="width_name">

事件绑定：

    v-on:click

    @click

 不传参可以不用加括号

    <button v-on:click="on_cl1">单击按钮count+1</button>

    <button @click="on_cl2(3)">单击+n</button>

    <button @click="on_cle($event,3)">单击按钮count+n</button>

 双向数据绑定 ：      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

    <p v-if="score>=90">优秀</p>

    <p v-else-if="score>=70">良好</p>

    <p v-else-if="score>=60">及格</p>

    <p v-else>及格</p>

    <p v-if="flag"> v-if区域 </p>

    <p v-show="flag">v-show区域 </p>

 列表渲染指令：

    <tr v-for="(item,index) in mems" :key="item.id">

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

key :主键，增加查询效率

        <tr v-for="(item,index) in mems" :key="item.id">

          <td>  {{index}}+{{item.id}}</td>

          <td>  {{item.name}}</td>

          <td>  {{item.age}}</td>

        </tr>

 过滤器 -

    多个方法|m1|m2 

<p>{{ message }}</p>
    <p>{{ message | upperStr }}</p>

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