第2章 *基础应用-常用命令（4）

官网：https://cn.vuejs.org/v2/api/
其他学习网站：
https://www.w3cschool.cn/aekdgs/nchp4dn1.html
http://www.runoob.com/vue2/vue-tutorial.html

Vue常用命令

文本渲染
v-text innerText
v-html innerHTML
v-once 静态/一次性

v-pre 原样输出
v-cloak 加载完成前隐藏属性名

条件渲染
v-if
v-show
v-if和v-show的总结
v-else
v-else-if

循环
V-for

V-on 事件处理简写@
V-bind 属性绑定(单向) 简写 :
v-model 双向绑定

v-text　##

文本插值与{{}}作用一样

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 第一步，引入vue -->
        <script src="js/vue.min.js"></script>
    </head>
    <body>
        <!-- 第二步，确定范围，此范围内有元素需要解析 -->
        <div id="content">
        <div v-text="msg"></div>
        </div>
        <script>
            <!-- 第三步，实例化vue对象 -->
            var vue=new Vue({
                el:'#content',
                data:{msg:'<h3>我是测试内容</h3>'}
                })
            </script>
    </body>
</html>

v-html

插值内容以html形式显示。
改写上例，把v-text 改为v-html测试下效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 第一步，引入vue -->
        <script src="js/vue.min.js"></script>
    </head>
    <body>
        <!-- 第二步，确定范围，此范围内有元素需要解析 -->
        <div id="content">
        <div v-html="msg"></div>
        </div>
        <script>
            <!-- 第三步，实例化vue对象 -->
            var vue=new Vue({
                el:'#content',
                data:{msg:'<h3>我是测试内容</h3>'}
                })
            </script>
    </body>
</html>

v-pre

跳过这个元素和它的子元素的编译过程,直接输出原始值。加快编译。
<div v-pre>{{msg}}</div>
这时并不会输出我们的msg值，而是直接在网页中显示 {{msg}}

v-once

只渲染元素和组件一次，即使数据更新，也不再变化
<div v-once>第一次绑定的值：{{msg}}</div>

v-cloak

防止页面加载进行时出现 vuejs 的变量名
HTML 修改成

<ul v-cloak>
  <li>{{ msg }}</li>
</ul>

CSS 中添加

[v-cloak] {
  display: none;
}

完整示例

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="./js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id="box" >
        <div v-text="msg"></div>
        <div v-html="msg"></div>
        <div v-once>v-once:{{msg2}}</div>
        <!-- 不编译，直接输出-->
        <div v-pre>{{msg3}}</div>
        <ul v-cloak>
          <li>{{ msg }}</li>
        </ul>
        
    </div>
    <script>
        let vue=new Vue({
            el:'#box',
            data:{
                msg:'<h3>我是测试数据</h3>',
                msg2:"我是初始化的值",
                msg3:"我是msg3的值"
            }
        })
        vue.msg2="我是修改的值"
        vue.msg="<h3>我是msg修改后的</h3>"
    </script>
    <style>
        [v-cloak] {
          display: none;
        }
    </style>
</body>

v-show

根据表达式之真假值，切换元素的 display CSS 属性。
v-show指令，等于true的时候显示，false的时候隐藏。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="js/vue.min.js"></script>
</head>
<body>
    <div id="box" >
    <span v-show="1>0">段落</span>
    <span v-show="1<0">段落1</span>
    </div>
    <script>
            var vm=new Vue({
                el:'#box'
                })
        </script>
</body>
</html>

v-if

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="id">
<span v-if="flag">
   如果flag为true则显示,false不显示!
</span>
</div>
</body>
<script>
var vm = new Vue({
el:"#id",
data:{
flag:true
}
})
</script>
</html>

v-if和v-show的总结

v-if和v-show 都能够实现对一个元素的隐藏和显示操作,但是v-if是将这个元素添加或者移除到dom中，而v-show 是在这个元素上添加 style="display:none"和移除它来控制元素的显示和隐藏的

课堂练习

点击按钮，实现标签的显示、隐藏和切换

v-else

限制：前一兄弟元素必须有 v-if 或 v-else-if。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="id">
<span v-if="flag">flag为true</span>
        <span v-else>flag为false</span>
</div>
</body>
<script>
var vm = new Vue({
el:"#id",
data:{
flag:false
}
})
</script>
</html>

v-else-if

表示 v-if 的 “else if 块”。可以链式调用。
前一兄弟元素必须有 v-if 或 v-else-if。

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="id">
<span v-if="msg==='A'">{{msg}}</span>
<span v-else-if="msg==='B'">{{msg}}</span>
<span v-else-if="msg==='C'">{{msg}}</span>
</div>
</body>
<script>
var vm = new Vue({
el:"#id",
data:{
msg:'B'
}
})
</script>
</html>

练习

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="js/vue.min.js"></script>
        </head>
        <body>
            <div id="content">
            <span v-if="msg==='A' ||msg==='B' ">{{msg}}</span>
            <span v-else-if="msg==='C'">{{msg}}</span>
            <span v-else>other</span>
            <span v-if="msg2>=90">优</span>
            <span v-else-if="msg2>=80">良</span>
            <span v-else-if="msg2>=70">中</span>
            <span v-else-if="msg2>=60">及格</span>
             <span v-else>不及格</span>
            </div>
        </body>
        <script>
        var vue=new Vue({
            el:"#content",
            data:{
            flag:true,
            msg:'D',
            msg2:50
            }
        })
        </script>
    </html>

V-for

https://cn.vuejs.org/v2/api/#v-for

遍历：必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：
<div v-for="item in items">
{{ item.text }}
</div>
例1：数组和json

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="js/vue.min.js"></script>
        </head>
        <body>
            <div id="content">
                <h2>普通数组</h2>
                <ul v-for="item in items">
                    <li>{{item}}</li>
                </ul>
                                    <h2>普通数组-获得索引</h2>
                                    <ul v-for="(item,index) in items">
                    <li>{{index}}-------{{item}}</li>
                </ul>
                <h2>json对象</h2>
                <h3>json-v1一个参数时获取值</h3>
                <ul>
                    <li v-for="v1 in jsonobj">{{v1}}</li>
                </ul>
                <h3>json-vk两个参数时获取v,k</h3>
                <ul>
                    <li v-for="(v,k) in jsonobj">{{v}}-{{k}}</li>
                </ul>
                <h3>json-vk三个参数时获取v,k,index</h3>
                <ul>
                    <li v-for="(v,k,index) in jsonobj">{{index}}-{{v}}-{{k}}</li>
                </ul>
                 
                <h2>json数组,读取时按数组读，只不过每次拿到的值是对象类型，想对象时要用   对象.属性  的方式</h2>
                <ul>
                    <li v-for="user in jsonarrs">{{user.name}}-----------{{user.age}}</li>
                </ul>
            </div>
            <script>
                var vue = new Vue({
                    el: "#content",
                    data: {
                        items: ['张三', '李四', '王五'],
                        jsonobj:{name:"wang.qj",age:18},
                        jsonarrs:[{
                        name: 'wang.qj',
                        age: 18
                    },{
                        name: 'makp',
                        age: 17
                    },{
                        name: 'qingx',
                        age: 16
                    }
                    ]
                    }
                })
            </script>
        </body>
    </html>

例2：访问json中的数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="(v,index) in json.arr" @click="get(index)">{{v}}</li>
            <!-- index的值不是固定的，相当于jq中的索引值 -->
        </ul>
        
    </div>

    <script>
        new Vue({
            el:'#box',
            data:{
                json:{
                    des:'描述性内容',
                    type:'数据',
                    arr:['apple','bananna','pear'],
                    title:['新闻'],
                    con:['']
                    
                },
                msg:0
            },
            methods:{
                get(n){
                    alert(n)
                }
            }
        })
    </script>
</body>
</html>

:key的作用

https://www.cnblogs.com/zhumingzhenhao/p/7688336.html
key的用法一般是:key='id'，意思是为元素绑定一个key属性，这个key属性为元素添加了一个唯一身份标识符。
之后，当数据改变，Vue底层通过对比能够更快的获取到更新的内容并显示到页面上。
总之就是一句话，key属性能够提升性能(主要作用于数据更新时)。

手册上的描述：v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 key 的特殊属性：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

课堂练习

动态加载商品列表

列表数据

                      goods: [{
                    src: 'images/1.jpg',
                    des: '这是第一个描述',
                    price: 198
                },
                {
                    src: 'images/2.jpg',
                    des: '这是第二个描述',
                    price: 198
                },
                {
                    src: 'images/3.jpg',
                    des: '这是第三个描述',
                    price: 211
                },
                {
                    src: 'images/1.jpg',
                    des: '这是第一个描述',
                    price: 198
                },
                {
                    src: 'images/3.jpg',
                    des: '这是第二个描述',
                    price: 112
                },
                {
                    src: 'images/3.jpg',
                    des: '这是第三个描述',
                    price: 423
                }]

代码

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="./js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<style>
    ul{
        list-style: none;
    }
</style>
</head>
<body>
    <div id="content">
        <ul>
            <li v-for="item in goods">
                {{item.src}}<br>
                {{item.des}}<br>
                {{item.price}}
            </li>
        </ul>
    </div>
    
    <script type="text/javascript">
        let vue=new Vue({
            el:'#content',
            data:{
                goods: [{
                            src: 'images/1.jpg',
                            des: '这是第一个描述',
                            price: 198
                        },
                        {
                            src: 'images/2.jpg',
                            des: '这是第二个描述',
                            price: 198
                        },
                        {
                            src: 'images/3.jpg',
                            des: '这是第三个描述',
                            price: 211
                        },
                        {
                            src: 'images/1.jpg',
                            des: '这是第一个描述',
                            price: 198
                        },
                        {
                            src: 'images/3.jpg',
                            des: '这是第二个描述',
                            price: 112
                        },
                        {
                            src: 'images/3.jpg',
                            des: '这是第三个描述',
                            price: 423
                        }]
                
            }
        })
        
        
    </script>
    
</body>

显示效果

image.png

上面的显示效果不是太理想，我们希望图片是以图的形式,

<img src="{{item.src}}"/> 不可以，需要用动态绑定属性V-bind

V-bind（属性控制|动态参数）

动态地绑定一个或多个属性，或一个组件 prop 到表达式。

把上面图片部分改造成如下两种形式都可以

    <!-- <img v-bind:src="item.src" width="300px" height="300px"/> -->
    <img :src="item.src" width="300px" height="300px"/>

显示效果

image.png

相当于.attr .prop
1)直接控制属性

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="js/vue.min.js"></script>
    </head>
    <body>
        <div id="box">
            <button @click="change">按我换图</button>
            <!-- v-bind:标签属性="data里面的变量" -->
            <img v-bind:src="src" alt="">
        </div>

        <script>
            new Vue({
                el:'#box',
                data:{
                    src:'img/01.jpg'
                },
                methods:{
                    change(){
                        this.src='img/02.jpg'
                    }
                }
            })
        </script>
    </body>
</html>

2)控制css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background: pink;
        }
        .two{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="box">
        <!-- <p v-bind:class="first"></p> -->
                    <!-- 如果用v-bind多个类名要用数组。使用变量 -->
        <!-- <p v-bind:class="[first,second]"></p> -->
                  <!-- 可以用对象的形式k:v  k代表类名。 v：true或者false，也可以用data里面的数据 -->
        <p v-bind:class="{one:show,two:hide}"></p>
        <!-- <p class="one two"></p> -->
    </div>
    <script>
        new Vue({
            el:'#box',
            data:{
                first:'one',
                // 赋的值取决于类名
                second:'two',
                show:true,
                hide:false
            }
        })
    </script>
</body>
 </html>

v-on 事件处理器（用于绑定鼠标或键盘事件）

参考：http://www.runoob.com/vue2/vue-events.html
注意看里面的按钮修饰符
绑定事件监听器。

<a v-on:click="doSomething">...</a>

<a @click="doSomething">...</a>

1）直接执行语句

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
counter: 0
  }
})
</script>
</body>
</html>

2）通常情况下，我们需要使用一个方法来调用 JavaScript 方法。
on指定事件与methods定义事件函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
   <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
greet: function (event) {
  // `this` 在方法里指当前 Vue 实例
  alert('Hello ' + this.name + '!')
  // `event` 是原生 DOM 事件
      if (event) {
          alert(event.target.tagName)
      }
}
  }
})
// 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
</script>
</body>
</html>

练习：
点击按钮换图

    <div id="content">
        <!--初始化时为1.jpg 点击换图按钮后换为2.jpg-->
        <button type="button" @click="changepic">换图</button>
        <img :src="src" width="300px" height="300px"/>
    </div>
    <script type="text/javascript">
        let vue=new Vue({
            el:'#content',
            data:{
                src:'images/1.jpg'
            },
            methods:{
                changepic:function(){
                    this.src="images/2.jpg";
                }
            }
        })
    </script>

3）除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
say: function (message) {
  alert(message)
}
  }
})
</script>
</body>
</html>

更多参考：https://cn.vuejs.org/v2/api/#v-on
按钮修饰符（键盘事件）

<input v-on:keyup.13="submit">

<input v-on:keyup.enter="submit">

<input @keyup.enter="submit">

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

小例子

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="js/vue.min.js"></script>
        </head>
        <body>
            <div id="content">
            <input v-on:keyup.enter="submit" name="username" id="username">
            </div>
            <script>
                var vue = new Vue({
                    el:"#content",
                    methods:{
                        submit:function(){
                            alert(document.getElementById("username").value);
                        }
                    }
                })
            </script>
        </body>
    </html>

v-model 双向绑定-变量的值根据输入的变化页变化(非常重要)

在表单控件或者组件上创建双向绑定。{{msg}}的值随着input输入值变化而变化
限制：<input><select><textarea>components

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="box">
    <!-- v-model:双向数据绑定。 -->
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
    </div>
    <script>
        var a=new Vue({
            el:'#box',
            data:{
                msg:''
            }
        })
    </script>
</body>
</html>

多行文本

<body>
<div id="box">
   <span>Multiline message is:</span>
   <p style="white-space: pre-line;">{{ message }}</p>
   <br>
   <textarea v-model="message" placeholder="add multiple lines"></textarea>
    </div>
    <script>
        var a=new Vue({
            el:'#box',
            data:{
                message:'初始值'
            }
        })
    </script>
</body>

单个复选框，绑定到布尔值：

<body>
<div id="box">
 <input type="checkbox" id="checkbox" v-model="checked">
 <label for="checkbox">{{ checked }}</label>
    </div>
    <script>
        var a=new Vue({
            el:'#box',
            data:{
                checked:''
            }
        })
    </script>
</body>

多个复选框，绑定到同一个数组：

应用，比如做批量删除，就可以用它生成id数组

<body>
    <div id="box">
        <input type="checkbox" id="jack" value="0" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="1" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="2" v-model="checkedNames">
        <label for="mike">Mike</label>
        <br>
        <span>Checked names: {{ checkedNames }}</span>
    </div>
    <script>
        var a = new Vue({
            el: '#box',
            data: {
                checkedNames: []
            }
        })
    </script>
</body>

单选按钮

<body>
    <div id="box">
         <input type="radio" id="one" value="One" v-model="picked">
          <label for="one">One</label>
          <br>
          <input type="radio" id="two" value="Two" v-model="picked">
          <label for="two">Two</label>
          <br>
          <span>Picked: {{ picked }}</span>
    </div>
    <script>
        var a = new Vue({
            el: '#box',
            data: {
                picked: 'Two'
            }
        })
    </script>
</body>

学习练习 https://cn.vuejs.org/v2/guide/forms.html

下拉选择框（单选时）

    <div id="box">
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
          </select>
          <span>Selected: {{ selected }}</span>
    </div>
    <script>
        var a = new Vue({
            el: '#box',
            data: {
                 selected: ''
            }
        })
    </script>

下拉列表框（可多选）

multiple selected: []

    <div id="box">
        <select v-model="selected" multiple style="width: 50px;">
            <option>A</option>
            <option>B</option>
            <option>C</option>
          </select>
          <br>
          <span>Selected: {{ selected }}</span>
    </div>
    <script>
        var a = new Vue({
            el: '#box',
            data: {
                 selected: []
            }
        })
    </script>

用 v-for 渲染的动态选项：

    <div id="box">
        <select v-model="selected">
          <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
          </option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>
    <script>
        var a = new Vue({
            el: '#box',
            data: {
                 selected: 'A',
                    options: [
                      { text: 'One', value: 'A' },
                      { text: 'Two', value: 'B' },
                      { text: 'Three', value: 'C' }
                    ]
            }
        })
    </script>
</body>

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值),这个在后面做医生排班时会用到：

选中和不选中时分别得到不同的值

<body>
    <div id="box">
    <input
      type="checkbox"
      v-model="toggle1"
      true-value="1"
      false-value="0"
    >
    <input
      type="checkbox"
      v-model="toggle2"
      true-value="1"
      false-value="0"
    >
        <span>Checked names: {{ toggle1 }}{{ toggle2 }}</span>
    </div>
    <script>
        var a = new Vue({
            el: '#box',
            data: {
                 toggle1:'',
                 toggle2:''
            }
        })
    </script>

修饰符

v-model.lazy:不实时显示，离开焦点时再显示
v-model.number:自动将输入转换成数字型
v-model.trim：去掉首尾空格

    <div id="content">
        <input type="text" name="userame" v-model.lazy="msg"/>
        <input type="number" name="age" v-model.number="num1" />
        <input type="text" name="commit" v-model.trim="commit" />
        <p>{{msg}}</p>
        <p>{{num1}}</p>
        <p>{{commit}}</p>
    </div>
    <script>
        let vue=new Vue({
            el:'#content',
            data:{
                msg:'',
                num1:'',
                commit:''
            }
        })
        
    </script>

Vue目前学到的属性

el
data
methods

最后编辑于：2020.03.23 09:01:03

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,445评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,889评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,047评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,760评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,745评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,638评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,011评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,669评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,923评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,655评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,740评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,406评论 4赞 320
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,995评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,961评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,197评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,023评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,483评论 2赞 342

第2章 *基础应用-常用命令（4）

Vue常用命令

v-text ##

v-html

v-pre

v-once

v-cloak

完整示例

v-show

v-if

v-if和v-show的总结

课堂练习

v-else

v-else-if

练习

V-for

:key的作用

课堂练习

V-bind（属性控制|动态参数 ）

v-on 事件处理器（用于绑定鼠标或键盘事件）

小例子

v-model 双向绑定-变量的值根据输入的变化页变化(非常重要)

多行文本

单个复选框，绑定到布尔值：

多个复选框，绑定到同一个数组：

单选按钮

下拉选择框（单选时）

下拉列表框（可多选）

用 v-for 渲染的动态选项：

选中和不选中时分别得到不同的值

修饰符

Vue目前学到的属性

推荐阅读更多精彩内容

v-text　##

V-bind（属性控制|动态参数）