1 第一个vue案例
- 导入vue.js
- 所有的内容必须写在el的模板内,即div内。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue的案例</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",//el模板指定
data:{//data定义的数据
msg:"hellow word",
}
})
</script
</body>
</html>
2 模板语法-文本语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue的案例</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<p>{{say}}</p>
<p>{{1+3}}</p>
<p>{{'你说：'+msg}}</p>
<p>{{msg.split('').reverse().join("")}}</p>
<p>{{msg.length}}</p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",//el模板指定
data:{//data定义的数据
msg:"hellow word",
say:"吃了吗",
}
})
</script>
<!-- 模板语法 文本 数据绑定最常见的形式就是使用{{}}语法 (双大括号)-->
</body>
</html>
3 文本指令
- v-text:只能渲染文本
- v-html：可以渲染html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue的案例</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<p v-text="say"></p>
<p v-text="msg"></p>
<p v-html="say"></p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",//el模板指定
data:{//data定义的数据
msg:"hellow word",
say:"吃了吗 <h1>处理</h1>",
}
})
</script>
<!-- 模板语法 文本 数据绑定最常见的形式就是使用{{}}语法 (双大括号)-->
</body>
</html>
4 属性绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue的案例</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1 v-bind:title="mytitle">属性绑定</h1>
<input type="text" v-bind:value="mytitle" />
<!-- v-bind 简写方式-->
<h1 :title="mytitle">我爱我的祖国</h1>
</div>
<script type="text/javascript">
new Vue({
el:"#app",//el模板指定
data:{//data定义的数据
mytitle:"我爱我的祖国",
}
})
</script>
</body>
</html>
5 条件语句
- 通过条件语句的来判断，满足条件才执行语句，不满足不会执行语句
- 项目的代码只要改age的值就可以了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue的案例</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p v-if="age>22">你可以成家了</p>
<p v-else-if="age>18">你可以当兵，保卫国家了</p>
<p v-else>你还是一个小屁孩</p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",//el模板指定
data:{//data定义的数据
age:14,
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue的案例</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p v-if="isLog">欢迎回来，<a href="">退出/a></p>
<p v-else>你还没有登录 <a href="">登录</a></p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",//el模板指定
data:{//data定义的数据
isLog:true,
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue的案例</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p v-show="score>90">成绩高于90</p>
<p v-show="score<90">成绩低于60</p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",//el模板指定
data:{//data定义的数据
score:82
}
})
</script>
</body>
</html>
- 注意：v-if 与v-show的区别:
1. v-if 条件不满足时，直接移除节点
2. v-show 条件不满足，通过css方式进行隐藏
3. 如果频繁切换显示与隐藏 建议使用v-show
4. 如果显示和隐藏切换次数少，建议使用v-if
6 遍历
6.1 数组遍历
- v-for
- index 数组的对于下标
- item 遍历的元素
- list 被遍历的数组
- key 的值要求是唯一（便于vue虚拟dom的优化渲染）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
<p v-for="(item,index) in list">{{index+1}}---{{item}}</p>
<p v-for="(item,index) in list" :key="item">
{{index+1}}-- {{item}}
</p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
list:["vue","react","angular"]
}
})
</script>
</body>
</html>
6.2 遍历对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p v-for="item in list" :key="item.name">
姓名： {{item.name}}<br>
年龄:{{item.age}}
</p>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
list: [{
name: "jack",
age: 18
},
{
name: "tom",
age: 19
},
{
name: "ck",
age: 20
}
]
}
})
</script>
</body>
</html>
7 绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button type="button" v-on:click="flag=!flag">切换</button>
<button type="button" @click="flag=!flag">切换</button>
<p v-if="flag">如果没有人敢</p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button @click="say('vue')">点击</button>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
},
methods:{
say(str){
alert("你好"+str);
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button @click="say($event,'vue')">点击</button>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
},
methods:{
say(e,str){
console.log(e);
alert(e.target.innerHTML)
alert("你好"+str);
}
}
})
</script>
</body>
</html>
- 事件的修饰符：
stop：阻止冒泡
once：只执行一次
prevent：阻止默认行为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div class="parent" @click="phd()">
<div class="son" @click.stop="shd()">
stop 阻止事件冒泡
</div>
<p @click.once="saylove()"> once 只执行一次</p>
<a href="https://www.baidu.com" @click.prevent="go()">阻止默认行为</a>
</div>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
},
methods: {
go(){
alert("go");
},
saylove(){
alert("i love you");
},
phd() {
alert("parent 被点击了");
},
shd() {
alert("son 被点击了");
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="mun" />
<p>{{mun}}</p>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
mun:1
},
methods: {
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>
<input type="checkbox" v-model="mun" />
同意条款
</p>
<p >
<button type="button" v-bind:disabled="!mun">提交</button>
</p>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
mun:false,
},
methods: {
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h3>爱好</h3>
<label><input type="checkbox" v-model="fav" value="唱歌" />唱歌</label><br>
<label><input type="checkbox" v-model="fav" value="跳舞" />跳舞</label><br>
<label><input type="checkbox" v-model="fav" value="武术" />武术</label><br>
<p>{{fav}}</p>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
//fav:["唱歌","跳舞","武术"]
fav: []
},
methods: {
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
//keyup 键盘弹起事件
// enter 代表回车
//list 数组 unshift 从当前面添加一个元素，添加完毕情况的temp
//v-model 将当前表单的value 与temp 进行双向绑定
<div id="app">
<input
@keyup.enter="list.unshift(temp);temp=''"
type="text"
placeholder="请输入学习内容"
v-model="temp" />
<p v-for="item in list" :key="item">
{{item}}
</p>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
temp: "",
list: ["vue", "reack", "webpack", "小程序"]
},
methods: {
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 上+1 下-1 左 为负数 右为正 -->
<input type="text" v-model="num" @keyup.up="num++" @keyup.down="num--" @keyup.left="num=-Math.abs(num)" @keyup.right="num=Math.abs(num)" />
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
num:1
},
methods: {
}
})
</script>
</body>
</html>