列表渲染指令v­-for

基本用法

v-for一定是写在要遍历的元素上,v-for后接等号,类似于item in items（相当于 for 循环遍历）
遍历多个对象一定是遍历的数组
遍历完，一定要用模板渲染，才能显示

  1. <!--  template  -->
  2. <div id="app">
  3.     <ul>
  4.         <li v-for="item in items">
  5.             {{item}}
  6.         </li>
  7.     </ul>
  8. </div>
  9. <!-- js -->
  10. <script type="text/javascript">
  11.     var app = new Vue({
  12.         el: '#app',
  13.         data: {
  14.             items:[1,2,3,4,5]
  15.         }
  16.     })
  17. </script>

对象遍历

遍历多个对象+索引

第一个item ，第二个 index 索引

  1. <ul>
  2.     <li v-for="(item, index) in items">
  3.         {{item}}
  4.         {{index}}
  5.     </li>
  6. </ul>
  7. <!-- js -->
  8. <script type="text/javascript">
  9.     var app = new Vue({
  10.         el: '#app',
  11.         data: {
  12.             items: [
  13.               {1:1},
  14.               {2:2},
  15.               {3:3},
  16.               {4:4},
  17.             ]
  18.         },
  19.     })
  20. </script>

遍历一个对象的多个属性

参数： 第一个为值，第二个为键名，第三个为索引

  1. <!--  template  -->
  2. <div id="app">
  3.     <ul>
  4.         <li v-for="(value,key,index) in items">
  5.               {{value}}
  6.             {{key}}     
  7.               {{index}}   
  8.         </li>
  9.     </ul>
  10. </div>
  11. <!-- js -->
  12. <script type="text/javascript">
  13.     var app = new Vue({
  14.         el: '#app',
  15.         data: {
  16.             items: {
  17.                 1:1,
  18.                 2:2,
  19.                 3:3,
  20.                 4:4,
  21.             }
  22.         },
  23.     })
  24. </script>

条件渲染指令

基本用法

v-if后接的是等号：等号后的内容必须是布尔值
v-if的实例用法弊端：
Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染
对不想让其复用的标签或者元素，加入key即可

需求：点击按钮，实现用户名输入框和密码输入框的切换

v­-if,v-else

  1. <div v-if="type==='name'">
  2.   用户名 ：<input type="text" placeholder="请输入用户名" key="name">
  3. </div>
  4. <div v-else>
  5.   密码 ：<input type="text" placeholder="请输入密码" key="psd">
  6. </div>
  7. <button v-on:click="toggleType">点我切换</button>
  8. <script type="text/javascript">
  9.     var app = new Vue({
  10.         el: '#app',
  11.         data: {
  12.         },
  13.           methods:{
  14.                 toggleType:function () {
  15.                      //三目运算符
  16.                      this.type = (this.type==='name' ?'password' : 'name')
  17.             }
  18.         }
  19.     })
  20. </script>

v­-else-if

  1. <div v-if="type === 'A'">A</div>
  2. <div v-else-if="type === 'B'">B</div>
  3. <div v-else-if="type === 'C'">C</div>
  4. <div v-else>Not A/B/C</div>

v­-show

  1. <p v-show="9>a">我被渲染</p>

v-­if和v­-show的比较

  • v-if：在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，

开销较高，在运行时条件很少改变时使用。
应用在要实时改变页面，股票，天气走势图

  • v-show：永远存在于页面中，只是调整css dispaly属性 none/block，开销较小。

应用在常频繁地切换时使用。 tab页，选项卡

v-text | v-html

模板取值{{ }}，有个弊端：当网速很慢或者 JavaScript 出错的时候
会在页面显示{{xxx}}此时就可以用 v-text 解决这个问题

  1. <div>{{LGD}}</div>
  2. <!-- 上面和下面是一样的 -->
  3. <div v-text="LGD"></div>

v-html输出 html 代码

  1. <p v-html="message"></p>

v-on

  1. <!-- template  -->
  2. <div id="app">
  3. 点击次数：  {{count}}
  4. <button v-on:click="handle()">点击我每次加1</button>
  5. //@click 是语法糖
  6. <button @click="handle(8)">点击我每次加8<button>
  7. </div>
  8. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  9. <script>
  10.     var app = new Vue({
  11.         el:"#app",
  12.         data:{
  13.             count: 0
  14.         },
  15.         methods:{
  16.             handle(count) {
  17.                 count = count || 1;
  18.                 this.count += count;
  19.             }
  20.         }
  21.     })
  22. </script>

v-model

以下model 都需要在 data 中声明初始值

  1. data:{
  2.     count:1,
  3.     status: [],
  4.     sex: 男，
  5.     selected: ''
  6. }

  1. input

    1. <input type="text" v-model="message">

  2. textarea

    1. <textarea  cols="30" rows="10" v-model="message"></textarea>

  3. checkbox

    1. <input type="checkbox" id="first" value="1" v-model="status">
    2. <label for="first">有效</label>
    3. <input type="checkbox" id="second" value="2" v-model="status">
    4. <label for="second">无效</label>
    5. <div>状态：{{status}}</div>

  4. radio

    1. <input type="radio" id="one" value="男" v-model="sex">
    2. <label for="one">男</label>
    3. <input type="radio" id="two" value="女" v-model="sex">
    4. <label for="one">女</label>
    5. <div>性别：{{sex}}</div>

  5. select

    1. <select v-model="selected">
    2.  <option disabled value="">请选择</option>
    3.  <option>A</option>
    4.  <option>B</option>
    5.  <option>C</option>
    6. </select>
    7. <div>Selected: {{ selected }}</div>

    v-pre

    在模板中跳过vue的编译，直接输出原始值，
    如果在标签中加入v-pre就不会输出vue中的data值了

    1. <div v-pre>{{message}}</div>

    v­-cloak

    解决初始化慢导致页面闪动的最佳实践
    在vue渲染完指定的整个DOM后才进行显示。
    一般与display：none 结合使用 ```html // css [v-cloak] { display: none; }

// html

{{message}}

  1. <a name="Qqj4f"></a>
  2. ## v­-once
  3. 定义它的元素和组件只渲染一次
  4. ```html
  5. <div v-once>第一次绑定的值：{{message}}</div>