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 标签 cssel:'#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 ###错误### 这也是两行表达式
![[Codeforces700E Cool Slogans]](http://pic.xiahunao.cn/[Codeforces700E Cool Slogans])
 return code = -2...)
