安装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通过由点(.)表示的指令后缀来调用修饰符。
...
...
5.2 按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
例如:
因为不可能记住所有的keycode,故可以使用别名的方式
全部的按键别名:(监听键盘点击事件)
6.VUE 表单
mclink
mclink
这是没有双向绑定的,修改值data不会变
这是进行了双向绑定的,修改同时改变data
{{content}}
:value 只是将值单向的绑定,即只会从data里面取值,但是不会改变data的值,而v-model则是双向
绑定,不仅会从data取值而且还能对应的修改data的值
7. 计算属性computed和侦听器wantch
姓:
名:
全名:
{{count}}
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 是数组元素迭代的别名。
- {{item}}
- {{item}}
使用 v-for="item in list" 或者 v-for="item of list" 进行遍历都可。