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核心特性：响应式
数据一旦变革，视图自动更新
访问数据： 实例.属性名
修改数据 : 实例.属性名 = 新值
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
