1.在head标签的script标签中导入一个vue包
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.创建一个控制区
<div id="app">
<!-- v-cloak能够解决插值表达式闪烁的问题 -->
<p v-cloak>{{msg}}</p>
<h1 v-text="msg"></h1>
<p>{{msg1}}</p>
<p v-text="msg1"></p>
<!-- v-html 没有闪烁问题且覆盖元素中原本的内容,内容当作html显示-->
<p v-html="msg1"></p>
<!-- v-bind :在vue中用于提供绑定属性的指令的指令-->
<!--v-bind 可以缩写成 : ,v-bind后面还可以加上合法的js表达式-->
<!-- vue 中提供了v-on 的事件绑定机制,缩写是 @-->
<input type="button" value="按钮" v-bind:title="mytitle +'123'" v-on:click="show"><br/>
<input type="button" value="按钮" :title="mytitle +'123'" v-on:mouseover="show">
</div>
3.在一个script标签中new一个vue的对象
<script>
var vm =new Vue({
el:'#app', //el表示当前我们new的一个vue的实例,要控制页面上的每一个区域
data:{ //data存放的是el中要使用的数据
msg:'欢迎使用vue' ,
msg1:'<h1>欢迎使用vue</h1>' , //通过vue使用的指令,很方便的就能把数据渲染到页面上,程序员不需要手动的操作DOM元素
mytitle:'这是一个自定义的title'
},
methods:{ //methods中定义的是当前vue实例中所有可用的方法
show:function() {
alert('hello')
}
}
});
</script>