使用编辑工具HBuilderX, 创建VUE项目。
项目创建选择
项目结构
结构介绍
src目录下：
- assets: 放置一些图片，如logo等
- components: 目录里面放了一个组件文件，可以不用
- App.vue: 项目入口文件，我们也可以直接将组件写这里
- main.js: 项目的核心文件
index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
代码1
image.png
这个 $el === document.getElementById() ！
数据绑定使用{{ }} 实现文本插值，再在vue 里面指定key
image.png
使用 v-html 指令用于输出 html 代码
image.png
HTML 属性中的值应使用 v-bind 指令，如果为 true 使用 class1 类的样式。
image.png
Vue.js 都提供了完全的 JavaScript 表达式支持。
image.png
v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
image.png
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性
image.png
image.png
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
网友评论