一、第一个vue小程序
var app = new Vue({
el:"#app",
data:{
message: "hello!",
people: {
name: "ch",
age: 14
},
arr:["都江堰校区","雅安校区","成都校区"]
}
})
事件渲染的基本格式
二、vue指令
1. v-text 设置标签文本值
<div v-text="message"></div>
message中的内容会将标签中的内容全部替换,如果只想替换部分内容,应该使用:
<div id="app">你好{
{
message }}</div>
2. v-html 设置标签的innerHTML
设置普通文本时功能与v-text一致,设置特殊文本时不同
<div id="app">
<div v-html="message"></div>
</div>
var app = new Vue({
el:"#app",
data:{
message: "<a href='#'>name</a>"
}
})
3. v-on 为元素绑定事件
<div id="app">
<input type="button" v-on:click="fun1" />
<input type="button" v-on:monseenter="fun1" />
<input type="button" v-on:dblclick="fun1" />
<input type="button" @click="fun1" />
</div>
var app = new Vue({
el:"#app",
methods:{
事件名1:function(){
}
})
v-on:可简写为@
4. v-show 根据后面表达式的真假,决定元素的显示或者隐藏(操纵元素的display)
<div id="app">
<input type="button" v-show="isShow" />
</div>
var app = new Vue({
el:"#app",
data:{
isShow: true
}
})
v-show后面接的表达式都会被解析成布尔值
5. v-if 根据表达式的真假,直接操纵dom元素的显示和隐藏
<div id="app">
<input type="button" v-if="isIf" />
</div>
var app = new Vue({
el:"#app",
data:{
isIf: true
}
})
频繁要切换显示或隐藏使用v-show,反之使用v-if,因为前者切换消耗资源少
6. v-bind 设置元素属性
<div id="app">
<img v-bind:src="imgSrc" />
</div>
var app = new Vue({
el:"#app",
data:{
imgSrc:######
}
})
v-bind:属性可简写成 :属性
7. v-for 根据数据生成列表结构
<div id="app">
<ul>
<li v-for="(item,index) in objArr">
{
{
item.name }}
</li>
</ul>
</div>
var app = new Vue({
el:"#app",
data:{
objArr:[
{
name: "a"},
{
name: "b"},
{
name: "c"},
]
}
})
8. v-on补充 传递自定义参数,时件修饰符
<input type="button" v-on:dblclick="fun1(参数一)" />//可以传递参数
<input type="button" v-on:keyup.enter="fun1(参数一)" />//因为有enter,所以在回车时才触发事件
链接: 事件修饰符大全.
- v-model 获取和设置表单元素的值
双向绑定,input的值为message的值,但如果input中的值因为输入而改变,那么message的值也改变。
<div id="app">
<input type="text" v-model="message"/>
</div>
var app = new Vue({
el:"#app",
data:{
message: "加油i"
}
})
三、简易记事本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>记事本</title>
</head>
<body>
<div id="notepad">
<div class="title">小北的记事本</div>
<div class="main">
<div class="inputText">
<input type="text" v-model="input" @keydown.enter="add"/>
</div>
<div class="list">
<ul>
<li v-for="(item,index) in list">
<div>
<span>{
{
index+1 }}.</span>
<label>{
{
item }}</label>
<button type="button" @click="destory(index)">x</button>
</div>
</li>
</ul>
</div>
<div v-if="list.length != 0">
<div class="number">
<span>{
{
list.length }}</span>
</div>
<div class="clearAll">
<button type="button" @click="clearALL">清除所有</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#notepad",
data:{
input: "好好学习",
list: ["好好学习",