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="
hello
"></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-绑定的初步理解

根据上面属性-事件-双向绑定的理解,绑定的意思就是引用变量,方法,函数,对象.例如

#在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:""

19 VUEX

https://www.jianshu.com/p/2e5973fe1223