<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
通过构造函数 Vue 就可以创建一个 Vue 的根实例,并启动 Vue 应用---入口
var app =new Vue({
el:'',
data:{
}
})
app.$el
直接app.属性名,如 app.msg
实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载, $el 还不可用。需要初始化处理一些数据时会比较有用,
el 挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始 。相当于 $(document).ready()---刚刚挂载
实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件,定时器等。 举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app2">
{{ msg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app=new Vue({ //通过构造函数新建一个vue的实例,
el:"#app2",//用于挂载页面上已经存在的dom元素
data:{
msg:"vue学习开始了"
},
created:function(){
alert('我是vue实例,已经创建完成,但还未挂载到dom上')
},
mounted:function(){
alert('我是vue实例,已经挂载到dom')
}
})
console.log(app.$data) //访问vue实例的属性
console.log(app.msg) //访问data元素的属性
//vue实例就是vue应用的一个入口,传递
</script>
</body>
</html>
使用双大括号( Mustache 语法)“{{}}”是最基本的文本插值方法,它会自动将我们双向绑定的数据实时显示出来,
在{{}}中,除了简单的绑定属性值外,还可 以使用 JavaScript 表达式进行简单的运算 、 三元运算等
Vue .js 只支持单个表达式,不支持语句和流控制。 {{ 6+6 *3}}---可以进行简单的运算 {{ 6<3 ? msg :a}}---可以用三元运算符 <br> {{if(6>3){}}-----注意:文本插值的形式,其中不能书写表达式,支持单个表达式
{{var a = 6}}--也是多行表达式----var a ;a = 6; 〈!一这是语旬,不是表达式 一〉