前端|vue 基础语法总结及例子说明基础语法|例子|vue

安装vue-cli:
安装 vue-cli 脚手架目前需要node版本为 v4.0 以上；
二、 vue-cli 全局安装
命令行执行 : npm install -g vue-cli// 加-g是安装到全局
安装完成以后可以输入命令：vue 回车，可以看到针对vue的命令行；

一.创建vue新项目.开启服务
安装好vue-cli后，进入vue目录后，执行vue init webpack "项目名称"
以下是各类参数的说明：
①Project name 项目名称
②Project description 项目描述
③Author 作者
④Vue build 创建模式,目录
⑤Use ESLint to lint your code
⑥Set up unit tests
⑦Setup e2e tests with Nightwatch 以上三个不选择No的话会选择严格模式，写项目时会出现很多告警错误
⑧Should we run "npm install" for you after the project has been created 是否自动执行安装依赖
然后cd 项目名称，执行npm run dev ，打开http://localhost:8080 即可访问。

注意：Vue.js 不支持 IE8 及其以下 IE 版本。

二.常见语法总结
1.差值表达法

{{msg}}

3.使用v-html 和v-text (主要使用输出未解析的HTML和文本的)

用了v-text,这里的东西不会显示的上面用的v-text是不会解析html标签的用了v-html,这里的东西不会显示的上面用的v-html是会解析html标签的

5.事件处理器（点击事件触发）

{{msg}}{{msg}}

5.1事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。

... ...

.stop: 不会一直传递，自己运行结束就结束了。
.prevent: 比如 submit 加了这个，就不会提交了。
.capture: 在传递的父子事件种，加了这个，无论先点哪个，都先执行这个。
.self: 只有点击自己本身才会执行，点他的子元素也不会被传递。
.once: 只执行一次。

5.2 按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
例如：

因为不可能记住所有的keycode，故可以使用别名的方式

全部的按键别名：（监听键盘点击事件）

.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

6.VUE 表单

mclinkmclink这是没有双向绑定的,修改值data不会变这是进行了双向绑定的,修改同时改变data {{content}}

：value 只是将值单向的绑定，即只会从data里面取值，但是不会改变data的值，而v-model则是双向
绑定，不仅会从data取值而且还能对应的修改data的值

7. 计算属性computed和侦听器wantch

姓:名:全名: {{count}}

【前端|vue 基础语法总结及例子说明】computed是在HTML DOM加载后马上执行的，如赋值；

而methods则必须要有一定的触发条件才能执行，如点击事件；

watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。

执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。

8.条件语句及循环语句
①v-if的使用

{{message}} 好玩吗？

②v-show的使用
与v-if类似，但是不会改变dom元素，只会再该元素上加上style = display:none 来隐藏

③v-for 循环语句的使用
v-for可以把数据中的一个数组对应为一组元素
v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。