Vue指令大全 - 开发实践
目录
Vue指令、Vue语法
v-bind
HTML 全选
<span v-bind:title="msg" style="background:red;height:10px;width:10px;">
测试span.title赋值
</span>
<br>
<a v-bind:href="url">点击打开 www.cscode.net </a>
JavaScript 全选
export default {
el: "#app",
name: "hello",
data() {
return {
code: "",
name: "",
userName: "", //定义属性，变量
msg: "HELLO WORLD!,this is my first project!",
url: "http://www.cscode.net",
menus: [{ Name: "系统管理" }, { Name: "基础资料" }],
};
}
}测试
运行，Page页面：
v-if v-else v-else-if
HTML 全选
<h1 v-if="intValue==1">当前值：{{intValue}}</h1>
<h1 v-else-if="intValue==2">当前值：{{intValue}}</h1>
<h1 v-else>{{intValue}}</h1>
<button id="button1" @click="changeValue">{{currentCaption}}</button>
JavaScript 全选
changeValue() {
this.intValue++;
this.currentCaption = this.currentCaption + this.intValue;
}
JavaScript 全选
data() {
return {
intValue: 1,
currentCaption: "点击我改标题"
}
}测试
v-model
HTML 全选
<!--开发者使用 v-model 指令时必须使用拥有 value 的 prop 组件-->
<input v-model="msg"><br>
<textarea v-model="msg"></textarea>JavaScript 全选
data() {
return {
msg: "HELLO WORLD!,this is my first project!"
}
}测试
错误：valid-v-model
HTML 全选
<span v-model="msg"></span>
v-text v-html
HTML 全选
<p v-text="htmlValue"></p>
<p v-html="htmlValue"></p>
<p>{{htmlValue}}</p>
JavaScript 全选
data() {
return {
htmlValue:"<span>Hello Vue</span>",
};
}
- v-text：显示文本信息
- v-html：显示html
测试
v-for
HTML 全选
<div id="menu">
<ol>
<li v-for="m in menus" :key="m.Name">
{{m.Name}}
</li>
</ol>
</div>错误：Frequire-v-for-key
解决方案
HTML 全选
<div id="menu">
<ol>
<li v-for="m in menus" :key="m.Name">
{{m.Name}}
</li>
</ol>
</div>测试
v-on
作用：对页面的事件进行绑定监听
语法：v-on:事件类型=“事件处理的函数”
举例：v-on:click="handle(999)"
HTML 全选
<div id="v-on">
<!-- 如果直接绑定函数名称，默认会传递事件的对象作为函数的第一个参数event -->
<button type="button" v-on:click="handle(123)">点击handle</button>
<!-- 在vue中，想传入自定义的实参值，又想获取事件对象，
可以借助$event关键字，它是vue框架内部专门指向事件对象的关键字 -->
<button type="button" v-on:click="handle1(123, 'as', $event)">点击handle1</button>
<button type="button" v-on:click="handle(999)">click me!</button>
</div>
JavaScript 全选
methods:{
handle(value) {
console.log(value);
console.log(typeof value);
},
handle1(num, str, event) {
console.log(num);
console.log(str);
console.log(event);
console.log(num, str, event);
}
}测试
v-on 可绑定多个事件event，当绑定多个事件时，需要传入一个对象，对象的键名就是事件名，对象的键值就是对应事件要执行的方法。
HTML 全选
<div class="app">
<button v-on="{mouseenter:onenter,mouseleave:leave}">click</button>
</div>
<div class="app">
<button v-on:mouseenter='onenter' v-on:mouseleave='leave' v-on:click="myclick">click me</button>
</div>
v-once
作用：告诉浏览器的Vue编译器,只渲染该元素或组件一次。v-once会覆盖原始内容，数据改变时，插值处的内容不会持续更新。
HTML 全选
<div id="v-once">
<p>无v-once指令：{{msg}}</p>
<p v-once>有v-once指令：{{msg}}</p>
<input type="text" v-model="msg">
<button type="button" v-on:click="changeValueEx(999)">修改msg的值</button>
</div>
JavaScript 全选
methods:{
changeValueEx(value) {
this.msg = 'changed!'
}
}测试
v-cloak
作用：它会在Vue实例结束编译时从绑定的HTML元素上移除。 v-cloak不需要表达式，v-cloak是一个解决初始化慢导致页面闪动的最佳实践。
HTML 全选
<div id="app" v-cloak>
<p>正在加载页面....</p>
</div>
v-show
作用：当v-show表达式的值为false时，元素会隐藏，查看DOM结果会看到元素上加载了内联样式display:none;
v-show的用法与v-if基本一致，不过v-show是改变元素的CSS属性display。
C# 全选
<div id="v-show">
<p v-show="status == 1">当status为1时显示该行</p>
<button type="button" v-on:click="setStatus(2)">设置status=2</button>
</div>
JavaScript 全选
data(){
return {
status:1
}
},
methods:{
setStatus(value) {
this.status = value;
}
}测试
版权声明：本文为开发框架文库发布内容,转载请附上原文出处连接
YESWEB C/S框架网
