vue笔记1 数据绑定，生命周期的钩子函数

内容简介：通过构造函数 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;

〈！一这是语旬，不是表达式一〉

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

人类2.0

皮埃罗∙斯加鲁菲（Piero Scaruffi) / 闫景立、牛金霞 / 中信出版集团股份有限公司 / 2017-2-1 / CNY 68.00

《人类2.0:在硅谷探索科技未来》从在众多新技术中选择了他认为最有潜力塑造科技乃至人类未来的新技术进行详述，其中涉及大数据、物联网、人工智能、纳米科技、虚拟现实、生物技术、社交媒体、区块链、太空探索和3D打印。皮埃罗用一名硅谷工程师的严谨和一名历史文化学者的哲学视角，不仅在书中勾勒出这些新技术的未来演变方向和面貌，还对它们对社会和人性的影响进行了深入思考。为了补充和佐证其观点，《人类2.0......一起来看看《人类2.0》这本书的介绍吧!

码农工具

JSON 在线解析

在线 JSON 格式化工具

RGB CMYK 转换工具

RGB CMYK 互转工具