Vue-指令和事件入门

Vue的指令

• 指令的作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
• 一个标签可以使用多个指令
• 指令作用范围：Vue实例挂靠的标签范围

有哪些指令

• v-text指令

     <标签名 v-text="表达式"></标签名>
  

• v-html指令【常用】

    <标签名 v-html="表达式"></标签名>
  

  • v-text和v-html一个以文本内容展示，一个以html标签展示

<div id="app">
    <div v-html="message"></div>
     <div v-text="message1"></div>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
        	message: "<h1>这是HTMl代码</h1>"
        	//用作两个指令的对照
            message1: "<h1>这是HTMl代码</h1>"
        }
    });
</script>

• v-for指令【常用】

    	1. <标签 v-for="元素 in 数据源"></标签>
    	
   	2. <标签 v-for="(元素,索引|键) in 数据源"></标签>
  		当数据源是数组时,  ()的第二个参数值索引
  		当数据源是对象时,  ()的第二个参数值键
    	3. <标签 v-for="(元素,键,索引) in 对象"></标签>
    	  数据源:   数组,
         元素:   数组中的一个元素,
    	  数据源:   对象
          元素:   对象中的一个指
  

<div id="app">
    <h1>循环数组</h1>
    <ul>
        <li v-for="hobby in hobbys">{{hobby}}</li>
    </ul>
    <h1>遍历对象</h1>
    <ul>
        <li v-for="value in student">{{value}}</li>
    </ul>

    <h1>带索引循环数组</h1>
    <ul>
        <li v-for="(hobby,index) in hobbys">{{index}}--{{hobby}}</li>
    </ul>
    <h1>带键遍历对象</h1>
    <ul>
        <li v-for="(value,key,index) in student">{{index+1}}---{{key}}--{{value}}</li>
    </ul>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            hobbys : ["爬山","游泳","打豆豆","睡觉"],
            student : {
                name: "小毛",
                age: 29,
                sex: "男",
            },
            num : 10,
            str : "itsource",
        }
    });
</script>

v-for指令案例：

1.<div id="app">
2.    <table >
3.        <tr>
4.            <th>序号</th>
5.            <th>姓名</th>
6.            <th>年龄</th>
7.            <th>性别</th>
8.        </tr>
9.        <tr v-for="student in students">
10.            <td>{{student.id}}</td>
11.            <td>{{student.name}}</td>
12.            <td>{{student.age}}</td>
13.            <td>{{student.sex}}</td>
14.        </tr>
15.    </table>
16.</div>
17.<script type="text/javascript" src=“js/vue/vue.min.js”></script>
18.<script type="text/javascript">
19.    var app = new Vue({
20.        el: "#app",
21.        data: {
22.            students: [
23.                {id:1,name: "刘备", age: 29, sex: "男"},
24.                {id:2,name: "貂蝉", age: 30, sex: "女"},
25.                {id:3,name: "吕布", age: 31, sex: "男"}
26.            ]
27.        }
28.    });
29.</script>

• v-bind指令【常用】

1.语法:

• 1.1 为一个标签属性绑定一个值
  <标签 v-bind:标签属性名字=“表达式”></标签>
  简写形式:
  <标签 :标签属性名字=“表达式”></标签>
• 1.2 为一个标签绑定一个对象作为该标签的多个属性
  <标签 v-bind=“对象”></标签>

<div id="app">
    <img v-bind:src="imgsrc" v-bind:title = "title"/>
    <img :src="imgsrc" :title = "title"/>
    <input v-bind="props"/>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            imgsrc: "./img/1.jpg",
            title: "二哈!",
            props :{
                type: "text",
                name: "username",
            }
        }
    });
</script>

• v-model 指令【常用】

• 1 . 语法:
  <标签 v-model=“表达式”></标签>

• 2 . 在表单控件上创建双向绑定

  • 2.1 表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,
  • 2.2 当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变.

• 3.注意事项:

  • 3.1 如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定.
  • 3.2 绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中
  • 3.3 v-model只作用于以下表单:
    == input select textarea==

<div id="app">
  <h1>绑定到type=text的input表单元素</h1>
  姓名:<input type="text" v-model="inputValue"><br/>
  data中的值:{{inputValue}}

  <h1>绑定到type=checkbox的input表单元素</h1>
  打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
  踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
  data中的值:{{checkboxValue}}


  <h1>绑定到type=radio的input表单元素</h1>
  打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
  踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
  data中的值:{{radioValue}}

  <h1>绑定到textarea的元素</h1>
  个人简介:<textarea v-model="textareaValue"></textarea><br/>
  data中的值:{{textareaValue}}


  <h1>绑定到单选的select的元素</h1>
  技能:<select v-model="skills">
        <option value="java">java</option>
        <option value="php">php</option>
        <option value=".net">.net</option>
      </select><br/>
  data中的值:{{skills}}

</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            inputValue: "初始化的值",
            checkboxValue: ["踢足球"],
            radioValue: "打篮球",
            textareaValue: "你是一个优秀的软件工程师!",
            skills: "java",
        }
    });
</script>

• v-show指令

  • 1 . 语法:
    <标签名 v-show=“表达式”></标签名>

  • 2 . v-show的作用
    根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
    当v-show的值为真时, 会在标签的css中添加 display: none :

  • 3 . 注意事项:

    • 3.1 当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除
    • 3.2 标签的值会自动转换为boolean类型的值
      实例：

<div id="app">
    <div v-show="show">你看到我了!</div>
    <div v-show="hidden">你看不到我了!</div>
    <div v-show="score>=90">优秀</div>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            "show":true,
            "hidden":true,
            "score":90,
        }
    });
</script>

• v-if指令【常用】

  • 因为和日常的if - else 一样，所以实例在一起

• v-else指令【常用】

• v-else-if指令【常用】

     语法:	
    <标签名 v-if="表达式"></标签名>
    <标签名 v-else-if="表达式"></标签名>
    <标签名 v-else-if="表达式"></标签名>
    <标签名 v-else></标签名>
  

<div id="app">
    <div v-if="score>=90">优秀!!</div>
    <div v-else-if="score>=70">良好!!</div>
    <div v-else-if="score>=60">及格!!</div>
    <div v-else="score<60">不及格!!</div>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            score: 80
        }
    });
</script>

事件

• 事件入门

• 1 . 语法:

  • 1.1 使用v-on指令注册事件
    <标签 v-on:事件句柄=“表达式或者事件处理函数”></标签>
  • 1.2 简写方式
    <标签 @事件句柄=“表达式或者事件处理函数”></标签>

• 2 . 注意事项:
  事件处理函数作为事件句柄的值不需要调用.

<div id="app">
  <h1>结果</h1>
    {{num}}
  <h1>表达式的写法</h1>
 <button v-on:click="num++">按钮</button><br/>
 <button @click="num++">按钮</button><br/>

 <h1>事件处理函数</h1>
 <button v-on:click="myclick">按钮</button><br/>
 <button @click="myclick">按钮</button><br/>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            num:0
        },
        methods:{
            myclick:function(){
                app.num++;
                console.log(this);
            }
        }
    });
</script>

• 内联事件处理函数(了解)

• 1 语法:
  1.1 使用v-on指令注册事件
  <标签 v-on:事件句柄=“内联函数(实际参数)”></标签>
  1.2 简写方式
  <标签 @事件句柄=“内联函数(实际参数)”></标签>

2. 注意事项:
   2.1 内联事件处理函数需要调用才能够执行并且可以传入实际参数给函数

<div id="app">
<button v-on:click="say('hello')">hello</button><br/>
<button @click="say('hi')">hi</button><br/>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
   var app = new Vue({
       el: "#app",
       data: {
       },
       methods:{
           say:function(message){
      //this指向当前vue对象：app
               console.log(this);
           }
       }
   });
</script>