vue 实例数据绑定指令事件

最新推荐文章于 2024-07-19 12:58:53 发布

weixin_33730836

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量75

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b3004f851882574b15893c6

版权

vue.js的模式

mvvm 模式视图层与数据层的双向绑定

环境搭建

其一引用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
复制代码

引用之后/创建vue实例这个实例是整个程序的启动入口

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
</head>
<body>
    <div id="app"> '页面别忘了挂载①'
        {{msg}}  //显示 !! 页面学习开始了
    </div>
</body>
<script>
    var app = new Vue({  '注意是 Vue'
        // 挂载的dom元素  可以是dom  标签  css
        el:'#app', '①'
        //声明应用内需要双向绑定的数据
        data:{
            msg:'学习开始了',
            ac:'acfun'
        }
    })
</script>
</html>
复制代码

如何访问 vue实例中属性

访问el 其中app是vue实例指向的变量

<script>
console.log(app.$el)
</script>
''控制台输出结果''
<div id="app">
    vue学习开始了
</div>
复制代码

访问data

<script>
console.log(app.$data)
</script>
''控制台输出结果''
<div id="app">
    vue学习开始了
</div>
复制代码

访问data中属性

<script>
console.log(app.msg)  更简单了
</script>
''控制台输出结果''
vue学习开始了
复制代码

生命周期的钩子

主要的三个方法

created 实例创建完成后调用此阶段完成了数据观测 ### 还未挂载到dom上##(可以在vue渲染页面前搞些事情用)
mounted 挂载到实例上后调用 ——刚刚挂载
boforeDestory 实例销毁之前调用主要解绑一些使用addEventListener监听的事件等

文本插值和表达式

{{双向绑定的数据试试显示}} ← 文本插值 {{6+6}} 也可以进行简单的运算 {{6>3 ? msg:ac}} 三元运算 {{if(6>3){}}} ##错误## 文本插值不可以书多个语句 {{var a=6}} var a; a=6 ###错误### 这也是两行表达式

转载于:https://juejin.im/post/5b3004f851882574b15893c6

weixin_33730836

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 实例数据绑定指令事件

vue.js的模式mvvm 模式视图层与数据层的双向绑定环境搭建其一引用<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 复制代码引用之后/创建vue实例这个实例是整个程序的启动入口<script src="https://cdn.jsdelivr.net/npm...
复制链接

扫一扫