1.mount
使用mount(‘hello-vue’)将Vue应用HelloVueApp挂载到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="hello-vue" class="demo">
{{message}}
</div>
<script>
const HelloVueApp={
data(){
return{
message:'Hello Vue!'
}
}
}
Vue.createApp(HelloVueApp).mount("#hello-vue")
// 以上代码使用mount('hello-vue')将Vue应用HelloVueApp挂载到 <div id="hello-vue" class="demo"></div>
</script>
</body>
</html>
2.data选项
函数,vue在创建新的组件实例的过程中调用此函数,它应该返回一个对象,然后通过vue会通过响应系统将其包裹起来,并以$data的形式存储在组件实例中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" class="demo"></div>
<script>
const app=Vue.createApp({
data(){
return{
count:4
}
}
})
const vm=app.mount("#app")
document.write(vm.$data.count);
document.write("<br>")
document.write(vm.count);
document.write("<br>");
vm.count=5;
document.write(vm.$data.count)
document.write("<br>")
vm.$data.count=6;
document.write(vm.count)
</script>
</body>
</html>
3.方法 methods
给组件添加方法,使用methods选项,该选项包含了所需要方法的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" class="demo"></div>
<script>
const app=Vue.createApp({
data(){
return{
count:4
}
},
methods:{
increment(){
// this指向该组件实例
this.count++;
}
}
})
const vm=app.mount("#app")
document.write(vm.count);
document.write("<br>");
vm.increment();
document.write(vm.count);
</script>
</body>
</html>
4.语法
1.最常见的插值是{{message}}(双大括号),message属性发生变化,标签内容也会变化
tip:如果不想改变标签内容,可以用v-once
<span v-once>这个将不会改变:{{message}}</span>
2.Html:v-html指令用于输出html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="example1" class="demo">
<p>使用双大括号的文本插值:{{rawHtml}}</p>
<p>使用v-html指令:<span v-html="rawHtml"></span></span></p>
</div>
<script>
const RenderHtmlApp={
data(){
return{
rawHtml:'<span style="color:red">这里会显示红色!</span>'
}
}
}
Vue.createApp(RenderHtmlApp).mount("#example1");
</script>
</body>
</html>
5. v-bind指令
对于布尔属性,常规值为true或false,如果属性值为null或者undefined,则该属性不会显示出来
该例子判断use的值,如果为true使用class1类样式,否则不使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.class1{
background: #444;
color: #eee;
}
</style>
</head>
<body>
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1':use}">
v-bind:class指令
</div>
</div>
<script>
const app={
data(){
return{
use:false
}
}
}
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
6.v-if
指令用于表达式的值改变时,将某些行为应用到DOM上
如下:v-if指令将根据表达式seen的值(true或者false)来决定是是否插入p元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
const app={
data(){
return{
seen:true//改为false,信息就无法显示
}
}
}
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
7.v-for指令
可以绑定数组的数据来渲染一个项目列表,遍历数组下的所指的site
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="site in sites">
{{site.text}}
</li>
</ol>
</div>
<script>
const app={
data(){
return{
sites:[
{ text:'Google'},
{ text:'Runoob'},
{ text:'Taobao'},
]
}
}
}
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
8.参数用冒号(:)指明
这里的href是参数,被告知指令将该元素的href属性与表达式url的值绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p> <a v-bind:href="url">淘宝</a></p>
</div>
<script>
const app={
data(){
return{
url:'http://www.taobao.com'
}
}
}
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
9.v-on简写@
监听DOM事件
事件 | 正常 | 简写 |
---|---|---|
单击 | v-on:click="" | @click="" |
进入 | v-on: mouseenter="" | @mouseenter="" |
双击 | v-on:dbclick="" | @dbclick="" |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<input type="button" value="v-on单击指令" v-on:click="doIt">
<h2 @click="changeFood">{{food}}</h2>
</div>
<script>
const app={
data(){
return{
food:"酸辣粉"
}
},
methods:{
doIt:function(){
alert("doIt");
},
changeFood:function(){
console.log(this.food);
this.food +="真好吃!"
}
}
}
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
10 v-model双向数据绑定
(input,select,textarea,checkbox,radio等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
const app={
data(){
return{
message:'Runoob!'
}
},
methods:{
reverseMessage(){
this.message=this.message
.split('')
.reverse()
.join('')
}
}
}
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
tip
两个缩写:
<button v-on:click="reverseMessage">反转字符串</button>
//等价于
<button @click="reverseMessage">反转字符串</button>
<p> <a v-bind:href="url">淘宝</a></p>
//等价于
<p> <a :href="url">淘宝</a></p>