发表于: 2019-12-02 19:47:10
1 1245
今日完成
- 1 创建一个静态模块
- 顺序
- 顺序
- 2 安装vue
- 进入hello-vue模块的位置,cmd:LeYouGou\code\demo-es6\hello-vue
- 初始化:npm init -y
- 初始化后多了一个package.json,类似版本信息
- 安装vue(--save是本地安装):npm install vue --save
- 安装好vue后的结构:node_modules是通过npm安装的所有模块的默认位置
- 安装好vue后的package.json:多了一个依赖
- 进入hello-vue模块的位置,cmd:LeYouGou\code\demo-es6\hello-vue
- 3 入门案例
- 1 vue声明式渲染(单向):hello.html
- 步骤
- 1 通过 new Vue()来创建Vue实例
- 2 构造函数接收一个对象,对象中有一些属性
- el:是element的缩写,通过id选中要渲染的页面元素,本例中是一个div
- data:数据是一个对象,里面有很多属性,都可以渲染到视图中
- name:这里我们指定了一个name属性
- 页面中的h2元素中,我们通过{{name}}的方式,来渲染刚刚定义的name属性。
- 代码
- 界面
- 步骤
- 2 双向绑定:hello.html
- 步骤
- 在data添加了新的属性:num
- 在页面中有一个input元素,通过v-model与num进行绑定
- 同时通过{{num}}在页面输出
- 代码
- 界面
- 步骤
- 3 事件处理:hello.html
- 步骤
- 用v-on指令绑定点击事件,而不是普通的onclick,然后直接操作num
- 普通click是无法直接操作num的
- 代码
- 界面
- 步骤
- 1 vue声明式渲染(单向):hello.html
明日计划
再了解一些vue
评论