Vue编程基础

一、依赖环境搭建：　　

　　添加镜像

# 安装好node.js后，使用淘宝镜像
npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

　　项目初始化

# 全局安装vue-cli
cnpm install vue-cli -g

# 查看安装vue-cli是否成功
vue list

# 选定一个路径新建项目hello-vue
vue init webpack "hello-vue"

# 安装相关vue依赖
cnpm install

# 运行
cnpm run dev

 

一、常用指令：

　　Vue是一个MVVM（Model / View / ViewModel）的前端框架

1. v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
2. v-for 格式： v-for="字段名 in(of) 数组json"  循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index
3. v-show 显示内容 （同angular中的ng-show）
4. v-hide  隐藏内容（同angular中的ng-hide）
5. v-if    显示与隐藏  （dom元素的删除添加 同angular中的ng-if 默认值为false）
6. v-else-if  必须和v-if连用
7. v-else  必须和v-if连用  不能单独使用  否则报错   模板编译错误
8. v-bind  动态绑定  作用： 及时对页面的数据进行更改
9. v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数  函数必须写在methods里面
10. v-text  解析文本
11. v-html   解析html标签
12. v-bind:class   三种绑定方法  1、对象型  '{red:isred}'  2、三元型   'isred?"red":"blue"'   3、数组型  '[{red:"isred"},{blue:"isblue"}]'
13. v-once  进入页面时  只渲染一次 不在进行渲染
14. v-cloak  防止闪烁
15. v-pre  把标签内部的元素原位输出