前言：前端框架千千万，独有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 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
| <!-- 阻止单击事件继续传播 -->
<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">
|
?
今天就到这里吧，风尚，好好学啊！慢慢消化，一会去吃饭
风尚一听，学！为了干饭！！！
冲冲冲！！！！！！
|