VUE常用语法

VUE绑定总结:

• {{}}去data里面的属性值和函数返回值
• v-bind简写:bind用来绑定style和class
• v-on简写@on用来绑定事件
• v-model用来双向绑定如input selected等标签

1-{{ }} 用于输出对象属性和函数返回值。

<div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>{{details()}}</h1>
 </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#vue_det',
            data: {
                site: “1234567",
                url: “www.baidu.com",
            },
            methods: {
                details: function() {
                    return  this.site;
                }
            }
        })
    </script>

2-v-text和v-html

使用v-text和v-html指令来替代{{}},属于单项绑定
说明：
v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
示例：
HTML:

<div id="app">
    v-text:<span v-text="hello"></span> <br/>
    v-html:<span v-html="<br>hello<br>"></span>
</div>

3-v-bind

属性绑定
html属性不能使用双大括号形式绑定，只能使用v-bind指令
在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组

data:{
    Url:”www.baidu.com"
}
比如img标签里面的src属性
<img :src = “Url"/>
或者
<img v-bind:src = “Url"/>

v-bind (style绑定)

//绑定css样式
<div v-bind:style="baseStyles"></div>
//数据部分
data: {
    baseStyles: {'background-color': 'red'}
}

//如果绑定多个css样式,用数组表示
<div v-bind:style="[baseStyles,overridingStyles]"></div>
data: {
    baseStyles: {'background-color': 'red'},
    overridingStyles: {border: '1px solid black'}
}

//对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

v-bind class样式绑定

<div id="app">
    <div v-bind:class="activeClass"></div>
    <div v-bind:class="errorClass"></div>
    //多个样式绑定采用数组
    <div v-bind:class="[activeClass, errorClass]"></div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            activeClass: 'active',
            errorClass: ['text-danger', 'text-error']
        }
    })
</script>

4-v-on(事件绑定)

//v-on的简写为@,事件为js函数
//v-on写法:btn是函数,123是参数
<button v-on:click = "btn(123)"></button>
//@:写法
<button @click = “btn(123)”></button>
//n++也为js函数
<button @click = “n++”>{{n}}</button>
//右击事件，并阻止默认事件发生
 <button @contextmenu.prevent="num++">增加一个</button>

Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
.stop ：阻止事件冒泡到父元素
.prevent：阻止默认事件发生*
.capture：使用事件捕获模式
.self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once：只执行一次

5-v-model(双向绑定)

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。
既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：
input
select
textarea
checkbox
radio
components（Vue中的自定义组件）
基本上除了最后一项，其它都是表单的输入项。
举例：
html：

<div id="app">
    <input type="checkbox" v-model="language" value="Java" />Java<br/>
    <input type="checkbox" v-model="language" value="PHP" />PHP<br/>
    <input type="checkbox" v-model="language" value="Swift" />Swift<br/>
    <h1>
        你选择了：{{language.join(',')}}
    </h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            language: []
        }
    })
</script>

多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值默认是boolean类型
radio对应的值是input的value值
text 和textarea 默认对应的model是字符串
select单选对应字符串，多选对应也是数组

6-v-for

遍历数组

//index是角标
<div id="app">
    <ul>
        <li v-for="(item,index) in users">
            {{item.name}} - {{item.gender}} - {{item.age}}
        </li>
    </ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            users:[
                {name:'柳岩', gender:'女', age: 21},
                {name:'峰哥', gender:'男', age: 18},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ]
        },
    })
</script>

遍历对象

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

1个参数时，得到的是对象的属性值
2个参数时，第一个是属性值，第二个是属性名
3个参数时，第三个是索引，从0开始

<div id="app">
    <ul>
        <li v-for="(value, key, index) in user">
            {{index + 1}}. {{key}} - {{value}}
        </li>
    </ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            user:{name:'峰哥', gender:'男', age: 18}
        }
    })
</script>

遍历数字(count从1开始算)

<div id="app">
    <ul>
        <li v-for="count in 3">
            这是第{{count}}此循环
        </li>
    </ul>
</div>
输出结果
这是第1此循环
这是第2此循环
这是第3此循环

7-v-on:keyup (按键修饰符)

我们按什么键触发什么事件.在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
键盘符号标准是按照:55-65分别代表字母A-Z,其中数字13代表回车键

//利用标准的键盘符写回车的绑定事件v-on:keyup.13
<input v-on:keyup.13="submit">
//记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
// v-on:keyup.enter代表回车按键
<input v-on:keyup.enter="submit">
//缩写语法
<input @keyup.enter="submit">

VUE全部的按键别名：
.enter*
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

6-绑定的初步理解

根据上面属性-事件-双向绑定的理解,绑定的意思就是引用变量,方法,函数,对象.例如<img src='url’>不用绑定样式的话,src的值就是url字符串,如果用:src绑定样式,就去当前vue查找变量是url的.

扫描二维码关注公众号，回复： 9795765 查看本文章

7-v-if

<div id="app">
    <button v-on:click="random=Math.random()">点我呀</button><span>{{random}}</span>
    <h1 v-if="random >= 0.75">
        看到我啦？！if
    </h1>
    <h1 v-else-if="random > 0.5">
        看到我啦？！if 0.5
    </h1>
    <h1 v-else-if="random > 0.25">
        看到我啦？！if 0.25
    </h1>
    <h1 v-else>
        看到我啦？！else
    </h1>
</div>

7一个vue里面的template只能有一个div

8-导入vonic三方库

查看官网,提示需要axios.js依赖,npm install axios命令执行完,会自动在package-lock.json和package.json中创建依赖
vonic没有npm安装方式,我们需要全局引入js和css样式

9-字符串拼接参数

//用``符号
Let b = 123456;
let a = `a={{b}}`

10-import(ES6语法)

导入部分，引入非export default 时，使用花括号：
import {name, age} from ‘./example’
全部导入
import people from ‘./example’
导入第三方插件不用大括号

11-import store from '@/vuex/store’中@代表什么

#在build文件夹下webpack.base.conf.js可找到@

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src')
    }
  },

这里指向src文件夹;
./: 当前目录下;
…/: 父级目录;
7-获取本地图片
不建议直接用,因为有时候vue打包以后找不到src目录

<img src=‘../assert/img/a.png’/>

如果在data里面,用v-bind:src或简写:src的方式也不行,会把imgUrl看成字符串,vue打包的时候,不会把正确的路径打到包里面

<img :src="imgUrl"/>
export default {
  data() {
    return {
        imgUrl:’../assert/img/a.png'       
    }

提供两种:
第一种:

<img :src="imgUrl"/>
import imgUrl from ‘@/assert/img/1.png’
export default {
  data() {
    return {
        imgUrl:imgUrl     
    }

第二种

<img :src="imgUrl"/>
import imgUrl from ‘@/assert/img/1.png’
export default {
  data() {
    return {
        imgUrl:require("@/assert/img/1.png")  
    }

13-钩子函数

beforeCreated：我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化时调用，也可以将他理解为初始化函数比较方便一点，在Vue1.0时，这个函数的名字就是init。
created：在创建实例之后进行调用。
beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}
mounted：我们可以将他理解为原生js中的window.οnlοad=function({.,.}),或许大家也在用jquery，所以也可以理解为jquery中的$(document).ready(function(){….})，他的功能就是：在dom文档渲染完毕之后将要执行的函数，该函数在Vue1.0版本中名字为compiled。 此时页面中的{{name}}已被渲染成峰哥
beforeDestroy：该函数将在销毁实例前进行调用 。
destroyed：改函数将在销毁实例时进行调用。
beforeUpdate：组件更新之前。
updated：组件更新之后。

14-父子组件数据传输

#query方式
-在父组件中用router.push方式跳转到父组件,并携带需要的参数
this.$router.push(
{
  name:"commentDetail", query:{name:张三}
})
-在子组件中的data中获取父组件传过来的值
  this.$route.query
#params方式,将上面例子替换成param就行,接收的时候用this.$route.params
不同点:
-query在url后面+参数.param在url没有加参数.刷新页面param数据会丢失.
举例说明:
name的值可以是对象,如果是对象,子组件接收的name的值就是对象,
this.$router.push(
{
  name:"commentDetail", query:{name:object}
})
-子组件接收
this.$route.query.name的值等于一个对象.

15-对象,字符串相关转换和说明

#在js里面我们这么定义一个值,js会自动看成一个是一个对象,不是字符串,注意没有"”双引号
var str1 = {"name":"zym", “sex":”男”}
#在js里面我们这么定义一个值,才会看成是字符串
var str2 = '{"name":"zym", “sex":”男”}'
#dom元素中取对象的值{{str1.name}},前提str是对象
#将数据转换为JavaScript 对象
let user =  JSON.parse(str2)--user输出object,
let user = JSON.parse(str2)--user.name输出zym
#将JavaScript对象值转换为JSON 字符串
JSON.stringify(str1) 输出字符串{"name":"zym", “sex":”男”}

15-路由跳转参数的传值(query)

采用query方,
-父组件将对象转换成字符串进行传输

this.$router.push(
{
  let item = {"name":"zym”,”sex”:"男”} //声明一个对象
  name:”子组件路由名称", query:{item:JSON.stringify(item)}//转成字符串
})

-子组件接收,将字符串再转换成对象

data(){
    item: JSON.parse(this.$route.query.item),
}

-dom元素引用

<div> {{ str.name}}</div>

16-父子组件相互传值(props)

https://www.jianshu.com/p/af9cb05bfbaf

17-和= != !==的区别

1.== 用于比较、判断两者相等，比较时可自动换数据类型
2.=== 用于（严格）比较、判断两者（严格）相等，不会进行自动转换，要求进行比较的操作数必须类型一致，不一致时返回flase。
3.!= 不严格,会自动转换(1 != ‘1’ 返回false) 1自动转换成字符串’1’ ,所以 ‘1’ != ‘1’ 不成立
4.!== 严格,不会自动转换(1 !== ‘1’ 返回true)
自动转换关系表:
对象——字符串
数字——字符串
布尔——数字

18-动态绑定

举例:想获取input标签输入的值,
<input type='text' v-model="content">
在data里面写上content:""