1，如何定义一个基本的Vue代码结构
2，插值表达式：存在闪烁问题 和v-text
3，v-cloak：能够解决 插值表达式闪烁的问题
4，v-text：v-text的值会覆盖元素中原本的内容，但是插值表达式只会替换自己的占位符，不会把整个元素清空
5，v-html：v-html会覆盖文本内容 但是会解析html格式并展示
6，v-bind：Vue提供的属性绑定机制，缩写是 :要绑定的属性
7，v-on：Vue提供的事件绑定机制，v-on:可以缩写为@
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <style> [v-cloak] { display: none; } </style> <body> <!--new出来的Vue实例会控制这个元素的所有内容--> <div id="app"> <!--使用v-cloak能够解决 插值表达式闪烁的问题--> <p v-cloak>{{msg}}</p> <!--默认 v-text 是没有闪烁问题的--> <!--v-text的值会覆盖元素中原本的内容，但是插值表达式只会替换自己的占位符，不会把整个元素清空--> <h4 v-text="msg"></h4> <!--v-html会覆盖文本内容 但是会解析html格式并展示--> <div v-html="msg2"></div> <!--v-bind是vue中用于绑定属性的指令--> <!--v-bind会把内容会把引号内容当成一个表达式 js代码解析执行--> <!--注意v-bind指令可以简写成 :要绑定的属性，v-bind中可以写合法的js表达式--> <input type="button" value="点击" v-bind:title="mytitle" v-on:click="show"> <!--vue提供了v-on：事件绑定机制--> </div> <script> // 2，创建一个vue实例 // 当导入包之后 在浏览器的内存中就多了一个Vue的构造函数 var vm = new Vue({ el: '#app', //表示当我们new的这个Vue实例 要控制页面上哪个区域 data: { // data属性中 存放的是el中要用到的数据 msg: '加油', //通过vue提供的指令 很方便的就能把数据渲染到页面上 msg2: '<h1>加油加油</h1>', mytitle: '学习' }, methods: {//这个methods属性中定义了当前Vue实例所有可用的方法 show: function(){ alert('hello') } } }) </script> </body> </html>