vue 简单使用
1、简单数据绑定
<div id="app-1">
{{message}}
</div>
new Vue({
el: '#app-1',
data: {
message: 'Hello Vue!'
}
})
2、v-html
<div id="app-2">
{{message}}
<span v-html="messageHtml"></span>
</div>
new Vue({
el: '#app-2',
data: {
message: 'Hello Word!',
messageHtml: '<h1>Hello</h1>'
}
})
3、v-if v-else v-show
<div id="app-3" >
<div v-if="ok">
原来是真的哦
</div>
<div v-else="ok">原来是假</div>
<div v-show="ok2">
2是真的哦
</div>
</div>
new Vue({
el: '#app-3',
data: {
ok: false,
ok2: false
}
})
4、v-for
<div id="app-4">
<ul>
<li v-for=" (s,index) in st ">
{{index}}-{{s.name}}-{{s.age}}
</li>
</ul>
<ul>
<li v-for=" aa in devstudent ">
{{aa}}
</li>
</ul>
</div>
new Vue({
el: '#app-4',
data: {
student: [1, 4, 23, 2, 3],
devstudent: '',
st: [
{name: 'zhangsan', age: '18'},
{name: 'lisi', age: '19'},
{name: 'wangwu', age: '15'}
]
},
computed: {
devstudent: function () {
return this.student.sort()
}
}
})
5、v-on
<div id="app-5">
<p>{{a}}</p>
<p>
<button v-on:click="jia">+1</button>
<button v-on:click="jian">-1</button>
</p>
<p>
<input type="text" @keyup.enter="onEnter" v-model="b">
</p>
</div>
new Vue({
el: '#app-5',
data: {
a: 10,
b: 0
},
methods: {
jia: function () {
this.a ++
},
jian: function () {
this.a --
},
onEnter: function () {
this.a = this.a + parseInt(this.b)
}
}
})
6、v-model
<div id="app-6">
<h1>选择框</h1>
<p>
<input type="checkbox" id="Jack" value="Jack" v-model="xzArray">
<label for="Jack">Jack</label>
<br>
<input type="checkbox" id="Jhon" value="Jhon" v-model="xzArray">
<label for="Jhon">Jhon</label>
<br>
<input type="checkbox" id="Joe" value="Joe" v-model="xzArray">
<label for="Joe">Joe</label>
<br>
<p>{{xzArray}}</p>
</p>
<h1>单选按钮</h1>
<p>
<input type="radio" id="one" value="true" v-model="danxuan">
<label for="one">true</label>
<br>
<input type="radio" id="two" value="false" v-model="danxuan">
<label for="two">false</label>
<br>
<p>{{danxuan}}</p>
<h1>选择列表</h1>
<p>
<select v-model="select">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>{{select}}</p>
</p>
</div>
new Vue({
el: '#app-6',
data: {
xzArray: [],
danxuan: '',
select: ''
}
})
7、v-bing
<div id="app-7">
<div v-bind:class="className">1.绑定className</div>
<div v-bind:class={classA:colorOr}>2.绑定class中的判断</div>
<div v-bind:class=[classA,classB]>3.绑定class中使用数组</div>
<div v-bind:class=[colorOr?classA:classB]>4.绑定class中使用三元表达式</div>
<div v-bind:class=[{classA:colorOr},classB]>5.绑定class中使用判断组合</div>
<div :style="{color:red, fontSize:font}">6.style绑定</div>
<div :style="fontArray">7.style绑定json数组</div>
</div>
<style>
.classA{
color: red;
}
.classB{
font-size: 200%
}
</style>
new Vue({
el: '#app-7',
data: {
className: 'classA',
colorOr: false,
classA: 'classA',
classB: 'classB',
red: 'red',
font: '30px',
fontArray: {
color: 'green',
fontSize: '12px'
}
}
})
8、自定义指令
