美文网首页技术干货
Vue基础

Vue基础

作者: Victor细节 | 来源:发表于2017-01-27 15:54 被阅读0次

Vue简介

Vue是数据驱动组件，为现代化的Web页面而生，与ReactJS的中心思想一样，都是一切皆是组件。他是MVVM模式的框架，这点又与AngularJS是一样的

特点

<li>简洁：HTML模板 + JSON数据 + Vue实例</li>
<li>数据驱动：自动追踪依赖的模板表达式和机选属性</li>
<li>组件化：用可解耦、可复用的组件来构造世界</li>
<li>轻量：~24kb min + zip，而且无依赖</li>
<li>快速：精确有效的异步批量DOM更新</li>
<li>模块友好：通过NPM或Bower安装，无缝融入你的工作流</li>

兼容性

Vue.js不支持IE8以下版本，Vue.js使用了IE8不支持的ECMAScript5特性

入门使用，简单的Demo

以下是本人通过本地vue.js学习的，因为服务器上面运行慢，不利用学习使用，所以以下的Demo全部在本地实现。

首先要引入vue.js文件，在网上请求文件亦可。

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

1.首先我们做一下最简单的Demo--Hello world

html代码

<div id="app">
    <p>{{message}}</p>
</div>

这里我需要解释一下：p标签之间的双大括号是Mustache语法，与AngularJS使用规则一样。内部不仅可以写变量也可以写一些表达式，如：1 + 2 ，Math.random()>0.5等等

js代码

    var vm = new Vue({
        el: "#app",
        data: {
            message: 'hello world'
        }
    });

这里我也需要强调一下，

  • vm其实就是view model的缩写 ，我们这里用vm来命名
  • el对应的是跟标签，这里的跟标签并不是html元素标签，而是我们所对应的元素 <code> <div id='app'></div> </code>
  • data对应的是数据，而这里data作为vueJS的内部实例数据对象，所以我们这里不需要通过data这个对象来调用数据
    而是直接用其内部属性名调用即可

2.接下来我要介绍一下vueJS中的绑定

一种是属性绑定，通过v-bind来实现 。另一种是事件绑定，通过v-on来实现。而：是v-bind的缩写，@是v-on的缩写

html代码

<div id="app-2">
   <span v-bind:title="message">
      Hover your mouse over me for a few seconds to see my dynamically bound title!
   </span>
</div>

<div id="app-3">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>

js代码

var app2 = new Vue({
    el: '#app-2',
    data: {
       message: 'You loaded this page on ' + new Date()
    }
})

var app3 = new Vue({
    el: '#app-3',
    data: {
        message: 'Hello Vue.js!'
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})

这里面methods是对应函数，后续我们给大家详细讲解

3.接下来我们看一下vueJS的语法糖 --v-model双向绑定

<div id="app-4">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

var app6 = new Vue({
    el: '#app-4',
    data: {
        message: 'Hello Vue!'
    }
})

其实这个完全可以用v-bind与v-on来实现

4.我们看一下vueJS是如何用for来渲染页面的

<div id="app-5">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
     </ol>
</div>


var app4 = new Vue({
        el: '#app-5',
    data: {
            todos: [
            { text: 'Learn JavaScript' },
            { text: 'Learn Vue' },
            { text: 'Build something awesome' }
        ]
        }
})

5.最后我们看一下，vue中的组件是如何运用的

html代码

<div id="app-7">
    <ol>
        <!-- Now we provide each todo-item with the todo object    -->
        <!-- it's representing, so that its content can be dynamic -->
        <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
    </ol>
</div>

js代码

// 用组建构建应用
// 在 Vue 里，一个组件实质上是一个拥有预定义选项的一个 Vue 实例：
// Define a new component called todo-item

Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
    el: '#app-7',
    data: {
    groceryList: [
            { text: 'Vegetables' },
            { text: 'Cheese' },
            { text: 'Whatever else humans are supposed to eat' }
        ]
    }
})

是不是非常的简单啊？这也就是我们vueJS基础的全部内容了，接下来我要给大家介绍一下vueJS的常用指令

  • v-if 根据表达式的值来渲染元素
  • v-else 与v-if是相对的，但是v-else必须配合v-if或者v-if-else来使用，不然系统是解析不了的
  • v-show 根据表达式的值得真假切换display，实现隐藏

这里我不得不对 v-if以及v-show做一下对比了：

v-if实现切换隐藏是对DOM的彻底销毁或重建，而v-show是切换的display属性，
也就是说，v-if在条件为假时是不会对DOM进行渲染的，而v-show是始终会对DOM进行着渲染。
直白一点：v-if的初始DOM渲染损耗要低于v-show，而切换损耗要高于v-show

  • v-for基于源数据或模板重复次数

语法：v-for=“item in items”    v-for=“item of items”
这里使用for-in与for-of均可。

v-for扩展

  • v-for=“(item,index) of items” 当遍历数组时，这里的item是元素index是数组的下标

  • v-for=“(value,key) of object” 当遍历对象的时候，第一个参数是对象中的value，第二个参数是key

  • v-for=“num of 10” 当遍历的是数字的时候，num是从1-10的数字

  • v-bind绑定

v-bind绑定也就是属性绑定，这在上文中已经提到了

让我们看一下它的语法：

  • v-bind:src='./vue.js' //简写： :src='./vue.js'

  • :class='{red:isRed}' //绑定class

  • :class='{classA,classB}' //可以绑定多个class

  • :style='{fontSize:size + "px"}' //绑定style

  • v-bind='{id:someProp,"other-attr":"other-value"}' //可以绑定多个属性

  • v-model在表单上创建双向绑定

最后我们来详细介绍一下Vue实例吧

Vue实例中的选项

  • 1.data----Vue实例数据对象，这个在上文中已经讲到，这里就不细说了
  • 2.methods----Vue实例的方法，实例可以直接访问这些方法，方法中的this自动绑定到实例
  • 3.computed----实例计算属性，1.同样也是属性，对应的不是值，而不是函数。2.getter和setter的this自动绑定到实例

实例计算属性的栗子

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hello'
        },
        computed: {
            // a computed getter
            reversedMessage: function () {
                // `this` points to the vm instance
                return this.message.split('').reverse().join('')
            }
        },
    })
    console.log(vm.reversedMessage);
    vm.message = 'luoxue';
    console.log(vm.reversedMessage);
</script>

实例属性

  • vm.$data--------Vue实例观察的数据对象
  • vm.$el----------Vue实例挂在的元素
  • vm.$parent
  • vm.$root
  • vm.$children

实例方法vm.$watch

观察Vue实例的一个表达式或计算函数

语法：

vm.$watch('msg',function(newValue,oldValue){
    console.log(newValue,oldValue);
});

vm.$unwatch返回一个取消观察函数，用来停止触发回调

var unwatch = vm.$watch('a',cb);
unwatch();

关于计算属性与watch方法的对比Demo

<div id="demo">
    <p>{{ fullName }}</p>
    <input v-model="firstName">
    <input v-model="lastName">
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        watch: {
            firstName: function (val) {
            this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' + val
            }
        }
    })
    // 上面代码是命令式的和重复的。跟计算属性对比：
    var vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
        },
        computed: {
            fullName: function () {
                return this.firstName + ' ' + this.lastName
            }
        }
    })
</script>

这里我们不难看出：使用计算属性方法要比，watch方法简单的多。但是有些时候计算属性并不能解决我们遇到的问题，使用watch方法也是一个不错的选择。

Vue实例之生命周期

Vue的实例是Vue框架的入口，其实也就是前端的ViewModel，它包含了页面中的业务逻辑处理、数据模型等，当然它也有自己的一系列的生命周期的事件钩子，辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染更新、渲染卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到
销毁的过程，就叫做生命周期。

  • created--------创建完成
  • mounted---------加载完成
  • updatad----------更新完成
  • destroyed---------已经释放
Paste_Image.png

上面我已经说了，VueJS的中心思想是一切皆是组件，下篇我会针对VueJS中的组件进行详解。

相关文章