Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue基础</title>
</head>
<body>
<div id="app">
{{message}}<!---->
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"Hello Vue!"
}
})
</script>
</body>
</html>el挂载点
el为挂载点，适用于css的各种选择器
id选择器# （在开发中尽量使用id）
class选择器.
还可以使用标签名
data数据对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue基础</title>
</head>
<body>
<div id="app">
{{message}}
<h2>
{{school.name}}
{{school.mobile}}
</h2>
<ul>
<li>
{{campus[0]}}
</li>
<li>
{{campus[3]}}
</li>
</ul>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"Hello Vue!",
school:{
name:"userlyz",
mobile:"123456"
},
campus:["地区1","地区2","地区三","地区四"]
}
})
</script>
</body>
</html>
Vue指令
内容绑定，事件绑定
v-text
只有不会对标签原有的内容进行改变
设置标签的文本值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue基础</title>
</head>
<body>
<div id="app">
<h2 v-text="message">userlyz</h2>
<h2 v-text="info">userlyz</h2>
<h2>{{txt}}userlyz</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"Hello userlyz!",
info:"Vue学习",
txt:"hello Vue!"
}
})
</script>
</body>
</html>v-html
跟v-text类似，当v-html中的有html标签内容的时候使用这个，v-text只会按照文本的方式进行显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue基础</title>
</head>
<body>
<div id="app">
<h2 v-text="message"></h2>
<p v-html="content"></p>
<a href="https://userlyz.github.io/2021/12/29/js-xue-xi/#toc-heading-53">userlyz1</a>
<p v-html="cont"></p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"Hello userlyz!",
content:"Hello userlyz!",
cont:"<a href='https://userlyz.github.io/2021/12/29/js-xue-xi/#toc-heading-53'>userlyz2</a>",
}
})
</script>
</body>
</html>
v-on为元素绑定事件
Vue中允许你v-on替换成@
点击事件，
<div id="app">
<input type="button" value="事件绑定" v-on:click="dolt">
<input type="button" value="事件绑定" v-on:monseenter="dolt">
<input type="button" value="事件绑定" v-on:dblclick="dolt">
<input type="button" value="事件绑定" @click="dolt">
<h2 @click="changfood">{{food}}</h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message:"Hello userlyz!",
food:"userlyz"
},
methods:{
dolt:function (){
alert("事件触发")
},
changfood:function(){
this.food+="你好！"
}
}
})
</script>案例 计数器
创建Vue实例时：el挂载点，data数据，methods方法
v-on指令的作用是绑定事件，简写为@
方法中通过this，关键字获取data中的数据
<div id="app">
{{message}}
<div class="input-num">
<button @click="sub">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"Hello userlyz!",
num:1
},
methods:{
sub:function(){
//alert("sub")
if(this.num>0){
this.num--;
}
else{
confirm("别减了")
}
},
add:function(){
//alert("add")
if(this.num<10){
this.num++;
}
else{
confirm("别加了")
}
}
}
})
</script>显示切换，属性绑定
v-show根据表达式的真假，切换元素的显示和隐藏
v-show=”ture” 或v-show=”age>=18”
原理是修改元素的displaly的值，显示隐藏 ；值为true元素显示，值为false元素隐藏；数据变化之后，对应元素的显示状态会同步更新
<div id="app">
{{message}}
<input value="切换图片的显示和隐藏" type="button" @click="changeisShow" >
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21042G4331941H-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642915250&t=bf95b9745b8bf5cd6e5905306dd3014f" width="50%" height="50%" v-show="isShow"/>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"Hello userlyz!",
isShow:false,
},
methods:{
changeisShow:function(){
//alert(this.isShow);
this.isShow=!this.isShow;
}
}
})
</script>v-if
根据表达式的真假，切换元素的显示和隐藏（直接操纵dom元素）
<div id="app">
{{message}}
<input type="button" value="切换显示" @click="changeisShow">
<p v-if="isShow">userlyz</p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"Hello userlyz!",
isShow:false,
},
methods:{
changeisShow:function(){
this.isShow=!this.isShow;
}
}
})
</script>
