Vue创建实例
Vue是用于构建用户界面的渐进式框架。
创建Vue实例，初始化渲染
- 准备容器
- 引包(开发版本/生产版本)
- 创建Vue实例
- 指定配置项，渲染数据 el指定挂载点 data提供数据
<!-- 准备容器 -->
<div id="app">
<h1>{{msg}}</h1>
{{coune}}
</div>
<!-- 引入包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<!-- 创建实例 一旦引入，在全局获得vue构造函数 -->
<script>
const app = new Vue({
//通过el配置选择器，指定盒子
el: '#app',
//通过data提供数据
data: {
msg: 'OK啊aa',
coune: '2w22'
}
})
</script>
</body>
插值表达式
{{ }}
利用表达式进行插值，渲染到页面中
表达式可以是被求值的代码，js引擎会计算出一个结果
注：
- 使用的数据必须存在
- 支持的是表达式，而非语句（if，for）
- 不能在标签属性中使用{{ }}插值
<body>
<div id="app">
{{uname+'喵'}}
{{demo.toUpperCase()}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
uname: '喵',
demo: 'ookok'
}
})
</script> 
Vue核心特性：响应式
数据一旦变化，视图自动更新
访问数据： 实例.属性名
修改数据 : 实例.属性名 = 新值
扫一扫
97
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
