一. 准备工作
1. 安装 node.JS [官网下载, 安装即可] 安装 cnpm:
NPM install -g cnpm --registry=https://registry.npm.taobao.org
2. 安装 vue
NPM install -g @vue/cli // @vue/cli 为新版本 vue-cli 为老版本
3. 创建项目:
vue create hello-world // 可以 cd 到项目里, 运行 cnpm install 安装依赖
4. 运行项目
NPM run serve
二. 绑定属性
1. 绑定属性
- <div v-bind:title="title">
- 放上鼠标显示
- < div>
- v-bind: 简写:
- <div :title="title">
- 放上鼠标显示
- < div>
- title 在 data 里定义, data 里的数据用'' 单引号阔气了 :src="url" :class :title
2. 绑定 html
- <div v-HTML="content">
- </div>
- <div v-text="content">
- </div>
3. 绑定样式: 可以进行判断
- <div :class="{'red':flag}">
- 你好
- </div>
- // 在样式表定义 red
- <div :class="{'red':flag,'blue':!flag}">
- 你好
- </div>
- // 只有真假, 不是 0 1
还有: style
4. 循环
- <li v-for="item in list">
- {{item}}
- </li>
- <li v-for="(item,key) in list">
- {{key}} {{item}}
- </li>
- <li v-for="(item,key) in list" :class="{'red':key==0}">
- {{key}} {{item}}
- </li>
- // 第一行 class="red"
三. 双向数据绑定
1. 针对表单元素 绑定关键词 v-model='xx'
3 获取 vue 的 dom 节点
节点添加标识 ref="" 如 userinfo
获取 DOM 节点 this.$refs.userinfo
获取 DOM 节点的值 this.$refs.userinfo.value
四. 事件与方法
1. 点击事件与方法 v-on 简写 @ , 方法内容放在 methods 里面.
2. 方法与方法之间用, 隔开
3. 添加数据用 push 如给数组 list 添加数据 ,this.list.push('xxxxx')
4. 执行方法传值: 如 [email protected]="xx(a)" 2. 方法() 添加形参, 3. 方法内得到参数.
5. 事件对象 @click="eventFn($event)" 定义对象(方法) eventFn(e) ,,,e.xx.xx
vue 学习笔记(全)
来源: http://www.bubuko.com/infodetail-3345457.html