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

发布时间:2019-05-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue笔记1 数据绑定,生命周期的钩子函数脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

一、 vue实例和数据绑定

1、引入vue的代码

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

2、创造vue的实例

通过构造函数 Vue 就可以创建一个 Vue 的根实例,并启动 Vue 应用---入口

VAR appnew Vue({
el:'',
data:{
}
})
  • 必不可少的一个选项就是 el 。 el 用于指定一个页面中己存在的 DOM 元素来挂载 Vue实例,可以是标签。也可以是css语法
  • 通过 Vue 实例的 data 选项,可以声明应用内需要双向绑定的数据建议所有会用到的数据都预先在 data 内 声明,这样不至于将数据散落在业务逻辑中,难以维护。也可以指向一个已经有的变量

3、访问数据方式

  • 访问vue实例元素
app.$el
  • 访问data元素的属性
直接app.属性名,如 app.msg
@H_360_88@二、生命周期钩子

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 表达式进行简单的运算 、 三元运算等

@H_437_304@3、实例

Vue .js 只支持单个表达式,不支持语句和流控制
{{ 6+6 *3}}---可以进行简单的运算

{{ 6<3 ? msg :a}}---可以用三元运算符 <br>
{{if(6>3){}}-----注意:文本插值的形式,其中不能书写表达式,支持单个表达式

4、注意

{{var a = 6}}--也是多行表达式----var a ;a = 6;
〈!一这是语旬,不是表达式 一〉

脚本宝典总结

以上是脚本宝典为你收集整理的vue笔记1 数据绑定,生命周期的钩子函数全部内容,希望文章能够帮你解决vue笔记1 数据绑定,生命周期的钩子函数所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。