标签：att active com ati spl 引擎 src code -o
一、基本使用
<div id="odiv">{{ greeting }}</div>
<script src="./static/vue.min.js"></script>
<script>
let vm = new Vue({
el: "#odiv",
data: {
greeting: "hello world",
}
})
</script>
二、常用指令
1、v-text、v-html
<div id="odiv" v-text="greeting"></div> <div id="odiv" v-html="greeting"></div> greeting: "<h1>hello world</h1>"
2、v-for：循环创建标签
<div id="odiv" v-for="num in yin">{{ num }}</div> <div id="odiv" v-for="student in students">{{ student.name }}</div> yin: [1, 2, 3] students: [{name: "yin"}, {name: "wen"}, {name: "jie"}]
3、v-if、v-show
v-if是先append多个标签，如果不符合条件再remove，这样来回切换的效率较低。
v-show是给不符合条件的标签加上display=none，效率更高一些。
<div v-if="word == ‘xxx‘">有</div> <div v-else-if="word == ‘xx‘">还是</div> <div v-else>没有</div>
<div v-show="isShow">你好</div>
4、v-bind：绑定属性
<div v-bind:href="path">点击</div>
<div v-bind:class="{active:isActive}">有</div>
<div v-bind:class="[attr]">有</div>
isActive:true,
attr: "active"
5、v-on：绑定事件
<div v-on:click="change">点击</div> // 可以简写成@click
methods:{
change:function(){xxx}
}
6、v-model：获取用户输入
<div id="app">
<input type="text" v-model="name"/>
<input type="checkbox" value="男" v-model="genders"/>
<input type="checkbox" value="女" v-model="genders"/>
<select v-model="girlfriends">
<option>康抻</option>
<option>鞠莹莹</option>
<option>嘉琪</option>
</select>
<textarea></textarea>
<hr>
{{ name }}
{{ genders }}
{{ girlfriends }}
</div>
<script>
// 数据模板引擎
// v-开头的指令是帮助我们渲染数据用的
let vm = new Vue({
el: "#app",
data: {
name: "juyingying",
genders: [],
girlfriends: []
},
})
</script>
7、计算属性：对数据进行加工操作
<input v-model="a">
<input v-model="b">
<input v-model="c">
<div>{{ total }}</div>
data:{a:1,b:2,c:3},
computed:{
total: function(){
return this.a + this.b + this.c
}
}
8、侦听器：当数据发生改变时触发
data: { question: ‘‘, answer: ‘I cannot give you an answer until you ask a question!‘ }, watch: { // 如果 `question` 发生改变，这个函数就会运行 question: function (newQuestion, oldQuestion) { this.answer = ‘Waiting for you to stop typing...‘ this.debouncedGetAnswer() } },
9、指令修饰符：对用户输入的数据加工
v-model.number="xx" // 将输入的数据改为数值类型 v-model.trim="xx" // 将输入的数据两端的空白去除 v-model.lazy="xx" // 在失去焦点时才更新数据
10、获取DOM元素
<div id="app">
<div ref="t" v-text="greeting"></div>
<button v-on:click="changeColor">点击变红</button>
</div>
<script src="./static/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
greeting: "hello world",
},
methods:{
changeColor:function(){
this.$refs.t.style.color = "red";
}
}
})
</script>
11、自定义指令
Vue.directive("pos", function(el, bindding){ // 第一个参数是指令名称，第二个参数是一个函数，其中参数1是绑定的标签，参数2是传入的数据
if (bindding.value=true){
el.style.position = "fixed";
el.style.right = 0;
el.style.bottom = 0;
}
})
标签：att active com ati spl 引擎 src code -o
原文地址：https://www.cnblogs.com/yinwenjie/p/11282141.html
