《风尚坐火箭学习vue》-- 第三章：Vue的语法,指令,事件

前言：前端框架千千万，独有vue占一半

我是风尚，让我们一起坐火箭去学习Vue

---

第三章：Vue的语法和指令

上章回顾：你好好理解啊！！！算了，我给你总结一下吧”老头说道。。。。。

---

        总结：

模板语法-文本语法

文本

数据绑定最常见的形式就是使用{{}}语法 (双大括号)

<span> {{message}}</span>

也可以使用v-text方法

<span v-text="message"></span>

html文本

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html

<div id="app">        <div v-html="rawMsg"></div>    </div>    <script type="text/javascript">        var app=new Vue({            el:'#app',            data:{                message:'hello Vue!',                rawMsg:'<h1>你好风尚vue</h1>'            }        })    </script>

模板语法-属性

给html标签绑定一个属性值应该使用 v-bind:属性名称

以下代码给h1绑定一个新的id和title属性

<div id="app">   <h1 v-bind:id="dyId" v-bind:title="dyTitle">我是一行快乐的标题</h1> </div>  <script type="text/javascript">      var app=new Vue({          el:'#app',          data:{              dyId:'best',              dyTitle:'看见我的人一生平安'          }      })  </script>

渲染结果是：

<h1 id="best" title="看见我的人一生平安">我是一行快乐的标题</h1>

绑定属性也是可以直接简写：

<h1 :id="dyId" :title="dyTitle">我是一行快乐的标题</h1>

使用 JavaScript 表达式

在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{4+5}}  {{ ok ? '是的' : '不是' }} {{['风尚','风尚啊'].join('--')}}

<!-- 这是语句，不是表达式 --> {{ var a = 1 }} <!-- 流控制也不会生效，请使用三元表达式 --> {{ if (ok) { return message } }}

条件指令 v-if

指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 真 值的时候被渲染。

<div v-if="isLogin">你好，风尚！</div>

也可以用 v-else 添加一个“else 块”：

<div v-else="">请登录后操作</div>

<div id="app">     <div v-if="isLogin">你好：风尚</div>     <div v-else="">请登录后操作</div> </div> <script type="text/javascript">     var app=new Vue({         el:'#app',         data:{            isLogin:false         }     }) </script>

v-show指令

另一个用于根据条件展示元素的选项是 v-show 指令

<h1 v-show="isShow">Hello!</h1>

v-show 只是调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。

v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。

列表渲染

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

基本用法

<li v-for="item in items">    {{item}} </li>

var app=new Vue({   el:'#app',   data:{       items:['angular','react','vue',jquery]   } })

对象循环输出

<li v-for="item in items">    {{item.name}}--{{item.age}} </li>

var app=new Vue({   el:'#app',   data:{       items:[          {name:"fsfs", age:18},          {name:"fsa", age:22},          {name:"风尚啊", age:28},       ]   } })

索引

<li v-for="(item, index) in items">    {{item.name}}-{{index}}-{{item.age}} </li>

结果是

<li>fsfs-0-18</li> <li>fsa-0-22</li> <li>风尚啊-0-28</li>

key

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。

<li v-for="(item,index) in items" :key="index">    {{item}} </li>

var app=new Vue({   el:'#app',   data:{       items:['mumu','风尚啊','风尚','fsa']   } })

如果不绑定tip 重复的'mumu' 再列表循环在列表循环会报错

监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<div id="app"> <button v-on:click="counter += 1">加 1</button> <p>按钮被点击了 {{ counter }}次.</p> </div>

var example1 = new Vue({ el: '#ap',   data: {     counter: 0   } })

事件处理方法

<div id="app">            <button v-on:click="greet">问候</button> </div> <script>    var app = new Vue({       el:'#app',       data:{          name:'Vue.js'       },       methods:{          greet:function(event){             // 'this' 在方法里指向当前 Vue 实例             alert('你好'+this.name+'!');             // 'even' 是元生 DOM事件             if(event){                alert(event.target.tagName)             }          }       }    })    // 也可以用JavaScript 直接调用    app.greet(); </script>

事件绑定简写方式
问候

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

• .stop
• .prevent
• .once

<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a>    <!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a>

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit"> <input v-on:keyup.page-down="onPageDown">

按键码

使用 keyCode 特性也是允许的：

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

Vue 提供了绝大多数常用的按键码的别名：

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

表单输入绑定

v-model

你可以用 v-model 指令在表单 >input<、>textarea< 及 >select< 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

信息是: {{msg }}

复选框

 {{ checked }}

多个复选框

<div id="app">   <input type="checkbox" id="name1" value="风尚" v-model="checkedNames">   <label for="name1">风尚</label>   <input type="checkbox" id="name2" value="风尚啊" v-model="checkedNames">   <label for="name2">风尚啊</label>   <input type="checkbox" id="name3" value="fsfs" v-model="checkedNames">   <label for="name3">mumu</label>   <br>   <span>选择的名字是: {{ checkedNames }}</span> </div>    <script>       var app = new Vue({          data:{checkedNames:[]},        })    </script> <!-- 结果 --> <!-- 选择的名字是:["风尚","风尚啊"，"fsfs"] -->

修饰符

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg">

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

<input v-model.number="age" type="number">

.trim 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

---

---

---

今天就到这里吧，风尚，好好学啊！慢慢消化，一会去吃饭

风尚一听，学！为了干饭！！！

冲冲冲！！！！！！