(直接在vscode上运行就可以，建一个html文件
注意导包 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>)
1 el的使用
Vue会管理el选项命中的元素及其内部的后代元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{{message}}
<div id="app">
{{message}}
</div>
//导入环境开发版本
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app", //与id=app相对应
data:{
message:"黑啊吗"
}
})
</script>
</body>
</html>
只在作用范围内有效果，外面的message不受影响 当然除了id选择器也可以选择使用其他选择器（建议使用id选择器)
注：不能使用在html和body上，不会产生任何效果
2 data：用于存储多种数据类型，用于调取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
<h2>{{school}}</h2> //获取全部元素
<h2>{{school.name}}</h2> //获取部分元素
<ul>
<li>{{campus}} </li> //获取数组
<li>{{campus[0]}} </li> //获取部分
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"黑啊吗",
school:{
name:"黑马",
tel:"154545",
},
campus:["背景","图片"]
}
})
</script>
</body>
</html>3 v-text:设置标签的文本值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 >深圳{{message+"!"}} </h2>
<h2 v-text="message+'!'"></h2>
<h2 v-text="message+info"></h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"河面",
info:"你好"
}
})
</script>
</body>
</html>使用数据格式是 v-text=" " 引号里面添加引用的数据的名称，如果直接使用v-text的话 标签的内容会全部被替换 所以常用第二种方法 +用来拼接前后的内容，同时也可以用+拼接数据
4 v-html:设置标签的innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-html="content"></p>
<p v-html="content1"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
content:"黑马程序员",
content1:"<a href=http://www.baidu.com>黑马程序员</a>"
}
})
</script>
</body>
</html>v-html与v-text:如果只是单纯文本框内容使用v-text 如果需要进行渲染则使用v-html
5 v-on:为元素绑定事件
格式: v-on:事件名=”方法"(可以将v-on:变换成@)
绑定的方法放在methods中
具体事件的详细总结可以看： Vue 中常用的事件总结（ 事件的概念 +事件要素+事件修饰符）_vue 事件-CSDN博客
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="v-on指令" @click="doIt"> //简写方式
<input type="button" value="v-on指令" v-on:click="doIt"> //一般方式
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
methods: {
doIt:function(){
alert("1111")
}
},
})
</script>
</body>
</html>补充:可以传递自定义参数，事件修饰符
具体可看:事件处理 — Vue.js (vuejs.org)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 只能用enter才能触发功能 -->
<input type="text" @keyup.enter="add">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
},
methods: {
add(){
alert("你好")
}
},
})
</script>
</body>
</html>