(直接在vscode上运行就可以，建一个html文件)
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>
