Vue.js 基础学习

今天我开始了Vue.js 的学习。

那么什么是Vue.js 呢？

Vue.js是一套开发Web页面的JavaScript脚本框架。听起来感觉很难，不过据说，Vue.js是Web-Javascript脚本框架中最容易上手的框架。所以我便选择了先来学习这个。

要学习Vue.js首先就要获取库文件了，在网上有很多地方可以找到，我是在bootcdn上找到的

接下来我们通过Vue输出一串Hello World !

首先引入vue.

    <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>

然后在body中创建一个div 并设置id

<div id="myApp">
        {{ message }}
    </div>

在文档中一旦出现{{ }}这种两对花括号时，vue就开始解析了，会把它当成类似js的语句来解释

接下来是js代码

<script>
    var myApp = new Vue({
        el : '#myApp' ,
        data : {
            message : "hello world!"
        }
    })
</script>

解释一下，上面js代码的含义 

new 一个Vue 其中el 是element的意思，用来绑定对象，即生成的Vue对象会产生一个域，这个域作用在那个元素上的 ，此处就是作用在id为myApp的元素上的

data 底下所有的属性都是绑定在这个myApp下的。

vue中的内容是直接和内存中的绑定的，如果你在网页的审查元素中书写 myApp.message = "Hello Vue" 那么此时页面内容也会变成Hello Vue

这样我们就实现了Hello world 了。

1、vue绑定对象

var myApp = new Vue({
el : '#myApp' ,
data : {
message : "hello!",
name : null 
}
})

new 一个Vue对象 并绑定id为myApp的元素
data 中的属性可以在被绑定对象中通过{{ }}使用

2、由于vue中的内容是直接和内存中的绑定的，如果你在网页的审查元素中书写 myApp.message = "Hello Vue" 那么此时页面内容也会变成Hello Vue 所以vue 中有一个可以动态改变data 中属性值的属性

<input type="text" v-model = "name">

在input中加入 v-model="name" 能够动态的改变 name属性值 name属性值与input输入框中的内容相同

<span v-show = "name">你的名字是：{{ name }}</span>

给一个标签加一个v-show属性，当v-show所等于的那个属性值若为false ，则将其隐藏，反之则显示

<span v-if = "age">你的年龄是：{{ age }}</span>

给一个标签加一个v-if属性，作用与v-show相同，两个的区别在于，v-if如果那个属性值为false，那么这个元素就直接删除了，而不是简单的隐藏

 

3、vue的常用指令

v-for 指令

ar app = new Vue({
el : '#app',
        data : {
             foodList : ['葱','姜','蒜']
             }
             })

在app的data中写入一个foodList数组

<div id="app">
        <ul>
            <li v-for="food in foodList">{{ food }}</li>
        </ul>
    </div>

在li中添加v-for来渲染出这个foodList v-for = "food in foodList" 然后在{{}}中间加如这个food就可以将foodList中的各个元素用li标签渲染出来

为了更加方便直观数据结构更清晰，我们可以将foodList中的元素都换成对象

foodList : [
                {
                    name : '葱',
                    price : 10
                },
                {
                    name: '姜',
                    price : 5
                },
                {
                    name: '蒜',
                    price: 8
                }
            ]

这是还是通过上面的v-for渲染，他会把这写对象已字符串的形式渲染出来
那么我们可以将{{ food }}改为{{ food.name }} :￥{{food.price}}
我们在console中通过app.foodList.push({name : '椒',price : 3})可以新添加并显示出来，这说明，v-for也是动态的在监视着

 

v-bind指令 ： 用来绑定数据和元素属性的

<div id="app">
<a v-bind:href="url">点我</a>
<div v-bind:class="myClass"></div>
</div>

 

<script src="Vue.js"></script>
<script>
var app = new Vue({
el : '#app',
data : {
url : "http://www.baidu.com",
myClass : "box"
}
})
</script>

我们可以通过上面的代码将a标签的href与data进行绑定这样通过改变url就可以动态的改变a标签的href属性值所有属性都可以进行绑定，如上面给div的class进行绑定，在console中通过改变myClass就可以改变这个div的样式了。
实用v-bind时可以只写 : 省略 v-bind , 这样更简洁方便

vue控制流指令
v-if=""
v-else=""
v-else-if=""

<div id="app">
        <div v-if="role === 'admin' || role === 'superAdmin'">
            管理员你好！
        </div>
        <div v-else-if="role === 'hr'">
            员工列表加载中
            .....
        </div>
        <div v-else>
            你没有访问权限！
        </div>
    </div>

var app = new Vue({
        el : '#app',
        data : {
            role : "hr",
        }
    })

上面这段代码是，判断data中role的值，对应显示符合条件的div