vue基础（vue实例、渲染、样式绑定、模板语法）

一、vue是什么

vue.js官网上其实介绍的很详细

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、vue实例

看一个vue实例

完整语法
v-on:click=”doSomething”
缩写
@click=”doSomething”

这是body部分的代码

<body>
    <div id="root">
        <div @click="handleleClick">
            {{message}}
        </div>
        <item></item>
    </div>
</body>

script部分的代码

//vue组件 会将它编译成vue实例
    Vue.component('item',{
        template:'<div>hello world</div>'
    })

    //vue实例
    var vm = new Vue({
        el:'#root',
        data:{
            message:'hello world'
        },
        methods:{
            handleleClick:function(){
                alert("hello")
            }
        },
    })

这是一个简单的vue实例。数据和 DOM 已经被建立了关联，所有东西都是响应式的。打开浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 message 的值，上例也会相应地更新。

item标签内容是一个div

可以绑定元素特性

鼠标点击将会弹出hello

三、条件渲染

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。

body部分的代码

    <div id="app">
        <!-- input会被复用,内容不会被清空,需加上key值 
            每次切换时，输入框都将被重新渲染 -->
        <div v-if="show">
            用户名：<input key="username" >
        </div>
        <div v-else>
            邮箱名：<input key="password" >
        </div>

        <!-- <div v-if="show==='a'">this is a</div>
            <div v-else-if="show==='b'">this is b</div>
            <div v-else>this is c</div> -->

    <!--带有 v-show 的元素始终会被渲染并保留在 DOM 中。
        v-show 只是简单地切换元素的 CSS 属性 display-->
        <!-- <div v-show="show">{{message}}</div> 性能更高 -->
    </div>

script部分的代码

var vm = new Vue({
        el:"#app",
        data:{
            show:false,
        }
    })

我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。

四、列表渲染

1、改变数组：

改变引用
调用编译方法（push，pop等）
用Vue.set

push 添加
pop 删除
shift：删除原数组第一项，并返回删除元素的值；如果数组为空则返回 undefined unshift：将参数添加到原数组开头，并返回数组的长度
splice(start,deleteCount,val1,val2,…)：从start位置开始删除deleteCount项，并从该位置起插入val1,val2,…
sort(orderfunction)：按指定的参数对数组进行排序
reverse：将数组反序
concat：返回一个新数组，是将参数添加到原数组中构成的

body部分代码

<div id="app">
    <div v-for="(item,index) of userInfo">{{item}}</div>
</div>

script部分的代码

var vm = new Vue({
    el:"#app",
    data:{
        userInfo:[1,2,3,4]
    }
})

列表渲染

body部分代码

<!--如果想切换多个元素呢？
此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。
最终的渲染结果将不包含 <template> 元素。-->

<!-- template:占位符 并不会真的被渲染到页面上-->
<template v-for="(item,index) of list" :key="item.id">
    <div>
        {{item.text}}==={{index}}
    </div>      
    <span>{{item.text}}</span>
</template>

script部分代码

var vm = new Vue({
    el:"#app",
    data:{
        list:[{
            id:"1234454",
            text:"hello"
        },{
            id:"123467",
            text:"dell"
        }]
    }
})

对象渲染

script部分代码

userInfo:{
    name:"dell",
    age:21,
    gender:"male",
    salary:"secret"
}

五、样式绑定

body部分代码

<div id="app">
    <div @click="handleDivClick" :class="[activated]">
        hello world
    </div>
</div>

script部分的代码

var vm = new Vue({
    el:"#app",
    data:{
        activated:""
    },
    methods:{
        handleDivClick:function(){
            this.isActivated=!this.isActivated;
        }
    }
})

六、模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

body部分的代码

<div id="app">
    <!-- 插值表达式 -->
    <div>{{name+' Lee'}}</div>

<!--双大括号会将数据解释为普通文本，而非 HTML 代码。
    为了输出真正的 HTML，你需要使用 v-html 指令-->
    <div v-text="name+' Lee'"></div>
    <div v-html="name+' Lee'"></div>
</div>

script部分的代码

var vm=new Vue({
    el:"#app",
    data:{
        name:"<h1>Dell</h1>"
    }
})