Vue(1)——创建实例
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> https://i-blog.csdnimg.cn/direct/6a86817dc6e24c82b65f3af9bdcc345a.png
插值表达式
{{ }}
利用表达式进行插值，渲染到页面中
表达式可以是被求值的代码，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> https://i-blog.csdnimg.cn/direct/82bc892e6a684c24b4fd5ad0ff7b9f7f.png
Vue核心特性：响应式
数据一旦变革，视图自动更新
访问数据： 实例.属性名
修改数据 : 实例.属性名 = 新值
https://i-blog.csdnimg.cn/direct/69ea2547fa6c4df989ebb3e41ca4a081.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]