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 表单


 



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}}

  • 加上key可以增加效率,Key要求每项的值都是不同的,即唯一性
  • {{item}}

使用 v-for="item in list"  或者 v-for="item of list" 进行遍历都可。

 

 

你可能感兴趣的:(前端,vue,基础语法,例子)