乐趣区

关于vue.js:04VUE中的常用指令操作

jiezi

背景剖析
传统的 html 并不反对表达式、分支语句、循环语句等构造的定义，为了补救其有余很多前端框架，模板引擎通过在 html 元素中增加自定义属性，而后底层再借助解析引擎对 html 自定义属性进行解决，以这样的形式来加强 html 的性能。

Vue 中的罕用指令
v-bind
在 html 中如果心愿元素的属性值随程序内容的产生而变动，能够借助 v -bind 或: 代替，其根本语法如：

< 元素 v-bind: 属性名 =” 变量或 js 表达式 ”>
也能够采纳其简化模式，其根本语法如：

< 元素 : 属性名 =” 变量或 js 表达式 ”>
案例剖析：

<div id="app">
    <font :color="color">hello</font>
</div>
<script>
    new Vue({
        el:"#app",
        data:{color:"red"}
    });
</script>

v-show
v-show 为一个专门管制元素的显示暗藏的非凡指令，其根本语法为：

< 元素 v-show=”bool 类型的变量或返回 bool 类型的 js 表达式 ”>
当 Vue 对象扫描到 v -show 时，就会立即执行 ”” 中的变量或 js 表达式,
如果变量或 js 表达式的值为 true，则什么也不干，元素放弃原样显示。如果变量或 js 表达式的值为 false，则 new Vue()主动为以后元素增加 display:none。

示例要害代码如下：

<style>

.pop{
  width:300px; height:150px;
  background-color:lightGreen;
}
.pop>.close{
  float:right;
  padding:5px 10px;
  cursor:pointer;
}

</style>
<div id=”app”>

<button @click="show">show</button>
<div v-show="display" class="pop">
  <span class="close" @click="hide">×</span>
</div>

</div>
<script>

    //2. 创立 new Vue 对象
    new Vue({
      el:"#app",
      data:{display:false},
      methods:{show(){this.display=true;},
        hide(){this.display=false;}
      }
    })
</script>

v-if 和 v-else
v-if 和 v-else 是在 html 实现分支管制，二选一的一种实现形式，在应用时，v-if 和 v -else 对应的的两个元素必须紧挨着写！两头不能插入其余元素，其根本语法为：

< 元素 1 v-if=”boolean 类型的变量或 js 表达式 ”>
< 元素 2 v-else>
示例要害代码如下：

<div id=”app”>

<!-- 第一个 div 是已登录时显示的内容 -->
<div v-if="isLogin"><h3>Welcome, dingding | <a href="javascript:;" @click="logout"> 登记 </a></h3></div>
<!-- 第二个 div 是未登录时显示的内容 -->
<div v-else><a href="javascript:;" @click="login"> 登录 </a> | <a href="javascript:;"> 注册 </a></div>

</div>

<script>

new Vue({
  el:"#app",
  data:{isLogin:false // 开局用户默认是未登录的},
  methods:{login(){this.isLogin=true;},
    logout(){this.isLogin=false;}
  }
})

</script>
v-else-if
v-else-if 专门和 v -if 搭配应用，管制多个元素多选一显示的非凡的指令。其根本语法为：

< 元素 1 v-if=” 条件 1 ″>

< 元素 2 v-else-if=” 条件 2 ″>

< 元素 3 v-else-if=” 条件 3 ″>

… …
< 元素 n v-else>
留神，v-if 和 v -else-if 和 v -else 之间必须连着写，不能插入其余元素。

示例要害代码如下：

<div id=”app”>

<span v-if="score>=90"> 优良 </span>
<span v-else-if="score>=80"> 良好 </span>
<span v-else-if="score>=70"> 及格 </span>
<span v-else> 及格 </span>

</div>
<script>

var vm=new Vue({
  el:"#app",
  data:{score:95}
})
// 在控制台中: vm.socre=85

</script>

v-for
v-for 是一个专门用于依据数组内容重复生成多个雷同构造的元素的非凡指令。其语法为：

< 要重复生成的元素 v-for=”(以后元素值, 以后地位) of 数组 ”>
示例要害代码如下：

<div id=”app”>

<!-- 需要: 依据 tasks 数组中的工作列表重复生成多个 li-->
<ul>
  <li v-for="(t,i) of tasks" :key="i">
  {{i+1}} - {{t}}
  </li>
</ul>

</div>
<script>

var vm=new Vue({
  el:"#app",
  data:{
    // 用一个数组保留待办事项列表
    tasks:["吃饭", "睡觉"]
  }
})

</script>
v-for 还能够遍历对象属性，例如：

<div id=”app”>

<!-- 需要: 遍历 lilei 对象，在页面显示李磊对象的详细信息 -->
<ul>
  <li v-for="(value,key) of lilei" :key="key">
    {{key}} : {{value}}
  </li>
</ul>

</div>
<script>

var vm=new Vue({
  el:"#app",
  data:{
    lilei:{
      name:"Li Lei",
      age:11
    }
  }
})

</script>
v-for 还能够进行计数，例如：

<div id=”app”>

<ul>
  <li v-for="i of pageCount" :key="i">{{i}}</li>
</ul>

</div>
<script>

new Vue({
  el:"#app",
  data:{pageCount:5 // 共 5 页}
})

</script>
v-on
v-on 是一个专门绑定事件处理函数的指令，其根本语法为：

< 元素 v-on: 事件名 =” 事件处理函数名()”>
v-on 也能够应用 @符号代替，其根本语法结构为：

< 元素 @事件名 =” 事件处理函数名()

如果事件处理函数不须要传入实参值，则 () 也可省略, 例如：

< 元素 @事件名 =” 事件处理函数名 ”>
但凡在页面中定义的事件处理函数，都要在 new Vue()中的 methods 成员内增加对应的函数实体。

示例要害代码如下：

<div id=”app”>
<!– 点哪个 div，哪个 div 就能够喊本人疼！–>
<div id=”d1″ @click=”say(‘html’)”>d1</div>
<div id=”d2″ @click=”say(‘css’)”>d2</div>
</div>

<script>

new Vue({
  el:"#app",
  methods:{say(name){console.log(`hello ${name}!`)
    }
  }
})

<script>
v-html
如果 {{}} 绑定的是一段 HTML 片段时，是不会交给浏览器解析的。而是原样显示 HTML 片段的内容——和 DOM 中的 textContent 是一样的, 如果心愿 html 可被解析能够应用 v -html 代替{{}}。其根本语法结构为：

< 元素 v-html=” 变量 ”> 这个地位显示变量内容 </ 元素 >
示例要害代码如下：

<div id=”app”>

<h3>{{msg}}</h3>
<h3 v-html="msg"></h3>

</div>
<script>

new Vue({
  el:"#app",
  data:{msg:` 来自 &lt;&lt;<a href="javascript:;"> 新华社 </a>&gt;&gt; 的音讯 `}
})

</script>
v-text
v-text 是可代替 {{}} 绑定元素内容的非凡指令, 用于设置元素外部的文本内容，而且能够避免因网络提早短暂显示 {{}} 的景象。其语法为：

< 元素 v-text=” 变量或 js 表达式 ”> </ 元素 >
示例要害代码如下：

<div id=”app”>

        <!--js 的天下         -->
<h3 v-text=` 用户名:${uname}`></h3>
        <!--js 的天下         -->
<h3 v-text=` 积分:${score}`></h3>

</div>
<script>

setTimeout(function(){
  new Vue({
    el:"#app",
    data:{
      uname:"dingding",
      score:1000
    }
  })
},6000)

</script>
v-model
v-model 是用于实现双向绑定的指令，既能将程序中的变动，自动更新到页面上(model->view)，又能将页面上产生的变动，更新回程序中的变量中(view->model), 其根本语法为：

< 表单元素 v-model:value=” 变量 ”>
示例要害代码如下：

<div id=”app”>

<!-- 单向绑定: (Model->View 不能 View->Model)-->
<!-- <input :value="keyword"> -->
<!-- 双向绑定: (Model->View 又能 View->Model)-->
<input v-model:value="keyword">
<button @click="doUpdate"> 更新 </button>

</div>
<script>

var vm=new Vue({
  el:"#app",
  data:{keyword:"ABC" // 开局用户没有输出任何关键词},
  methods:{doUpdate(){console.log(` 查找 ${this.keyword} 相干的内容...`)
    }
  }
})

<script>
单选操作的双向绑定：
单选操作的 value 因为是写死的固定的备选值！用户在不同 radio 之前切换选中状态时，其实扭转的是 radio 的 checked 属性值。所以，想用双向绑定取得以后选中的 radio 的值，应该绑定 checked 属性:

<input type=”radio” value=” 固定值 ” v-model:checked=” 变量 ”>
示例代码如下：

<div id=”app”>

性别:
<label><input type="radio" name="sex" value="1" v-model:checked="sex"> 男 </label>
<label><input type="radio" name="sex" value="0" v-model:checked="sex"> 女 </label>
<h3> 您选的性别是:{{sex==1?"男":"女"}}</h3>

</div>
<script>

new Vue({
  el:"#app",
  data:{sex:1}
})

</script>

select 元素的双向绑定
一个 select 下蕴含多个 option 元素。所有备选值 value，都散布在每个 option 上。然而每个备选值 value 也是写死的。用户每次抉择不同的 option 时，其实 select 元素会将选中的 option 的 value 值，批改到 select 的 value 属性上。其语法为：

<select v-model:value=” 变量 ”>
<option value=” 值 1 ″>xxx</option>

… …

… …
</select>
示例代码如下：

<div id=”app”>

<select v-model:value="src">
  <option value="beijing"> 北京 </option>
  <option value="shanghai"> 上海 </option>
  <option value="hangzhou"> 杭州 </option>
</select><br/>
<img :src="src">

</div>
<script>

new Vue({
  el:"#app",
  data:{src:"beijing"}
})

</script>
总结 (Summary)
本大节，次要是对 vue 中罕用的的一些指令元素进行了剖析，在了解和利用的过程中能够参考本文档和官网文档再联合实际进行纯熟利用。

退出移动版