内容简介：通过构造函数 Vue 就可以创建一个 Vue 的根实例，并启动 Vue 应用---入口实例创建完成后调用，此阶段完成了数据的观测等，
一、 vue实例和数据绑定
1、引入vue的代码
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
2、创造vue的实例
通过构造函数 Vue 就可以创建一个 Vue 的根实例，并启动 Vue 应用---入口
var app ＝new Vue({
el:'',
data:{
}
})
- 必不可少的一个选项就是 el 。 el 用于指定一个页面中己存在的 DOM 元素来挂载 Vue实例, 可以是标签。也可以是css语法
- 通过 Vue 实例的 data 选项， 可以声明应用内需要双向绑定的数据 。 建议所有会用到的数据都预先在 data 内 声明 ，这样不至于将数据散落在业务逻辑中，难以维护。也可以指向一个已经有的变量
3、访问数据方式
- 访问vue实例元素
app.$el
- 访问data元素的属性
直接app.属性名，如 app.msg
二、生命周期钩子
1、 created
实例创建完成后调用，此阶段完成了数据的观测等， 但尚未挂载， $el 还不可用 。需要初始化处理一些数据时会比较有用，
2、 mounted
el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始 。 相当于 $(document).ready()---刚刚挂载
3、beforeDestroy
实例销毁之前调用。主要解绑一些使用 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>
三、 文本插值和表达式
1、语法：
使用双大括号（ Mustache 语法）“ ｛｛｝｝”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，
2、用法
在｛｛｝｝中，除了简单的绑定属性值外，还可 以使用 JavaScript 表达式进行简单的运算 、 三元运算等
3、实例
Vue .js 只支持单个表达式，不支持语句和流控制。
{{ 6+6 *3}}---可以进行简单的运算
{{ 6<3 ? msg :a}}---可以用三元运算符 <br>
{{if(6>3){}}-----注意：文本插值的形式，其中不能书写表达式,支持单个表达式
4、注意
{{var a = 6}}--也是多行表达式----var a ;a = 6;
〈！一这是语旬，不是表达式 一〉
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
程序员成长的烦恼
吴亮、周金桥、李春雷、周礼 / 华中科技大学出版社 / 2011-4 / 28.00元
还在犹豫该不该转行学编程？还在编程的道路上摸爬滚打？在追寻梦想的道路上你并不孤单，《程序员成长的烦恼》中的四位“草根”程序员也曾有过类似的困惑。看看油田焊接技术员出身的周金桥是如何成功转行当上程序员的，做过钳工、当过外贸跟单员的李春雷是如何自学编程的，打小在486计算机上学习编程的吴亮是如何一路坚持下来的，工作中屡屡受挫、频繁跳槽的周礼是如何找到出路的。 《程序员成长的烦恼》记录了他们一步一......一起来看看 《程序员成长的烦恼》 这本书的介绍吧!
