Vue.js基础详解

vue.js

vue介绍

Vue.js（读音 /vjuː/，相似于 view） 是一套构建用户界面的渐进式框架。与其余重量级框架不一样的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不只易于上手，还便于与第三方库或既有项目整合。另外一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也彻底可以为复杂的单页应用程序提供驱动。
vue是一款简单的mvvm（model-view-viewmodel）框架。

vue起步

vue的引入与javascript其余库的引入相同，经过一对闭合的script标签包裹

<script src=""></script>

声明式渲染

vue是一个容许采用简洁的模板语法来声明式的将数据渲染进DOM

<div id="box">{{msg}}</div> 
<!-- view 模板 -->
<!-- mustache语法{{}} -->

var data={
    msg:"世界舞王，尼古拉斯-赵四"
}
// model-模型  数据

var box = new Vue({
    el:"#box",
    data:data   
})
// viewmodel视图模型 用来将数据渲染到模板上
// 用new Vue 建立一个 Vue 对象
// el：接选择器 类选择器，id选择器等均可以

世界舞王，尼古拉斯-赵四

如今咱们就运用声明式渲染生成了咱们第一个Vue应用。

除了给文本赋值，咱们还能够利用Vue绑定DOM元素属性

<div id="box">
    <span v-bind:title="msg">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>
<!-- v-bind 动态绑定一个或多个属性 -->

var box = new Vue({
    el:"#box",
    data: {
        msg: '页面加载于' + new Date().toLocaleString()
        }  
})

鼠标悬停几秒钟查看此处动态绑定的提示信息！

这里咱们遇到点新东西。你看到的 v-bind 属性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。简言之，这里该指令的做用是：“将这个元素节点的 title 属性和 Vue 实例的 msg 属性保持一致”。
再次打开浏览器的 JavaScript 控制台输入 box.msg = '新消息'，就会再一次看到这个绑定了 title 属性的 HTML 已经进行了更新。
Vue更多的学习指令和组件。

条件与循环

Vue控制一个DOM元素的显示和隐藏也很简单，只需运用指令v-if就能够了

<div id="box">
    <p v-if="seen">显示模式</p>
</div>

new Vue({
    el: '#box',
    data: {
        seen: true
    }
})

显示模式

当咱们将data数据里的seen更改成false时，咱们会发现元素已经隐藏。

若是们须要将数据渲染到一个项目列表中，那么咱们就须要使用到v-for指令

<div id="box">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>
<!-- todo 就是咱们自定义的变量 -->

new Vue({
    el: '#box',
        data: {
            todos: [
            { text: '学习 JavaScript' },
            { text: '学习 Vue' },
            { text: '整个牛项目' }
            ]
    }
})

1.学习 JavaScript
2.学习 Vue
3.整个牛项目

在控制台里，输入 box.todos.push({ text: '新项目' })，你会发现列表中添加了一个新项。

处理用户事件

v-on能够绑定一个事件监听器。

<div id="box">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
</div>

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

v-model能够实现模板和数据之间的双向绑定，咱们既能够经过改变数据改变值，还能够经过改变模板内的值改变数据

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

new Vue({
    el: '#box',
    data: {
        message: 'Hello Vue!'
    }
})

组化应用构建

组件系统是 Vue 的另外一个重要概念，由于它是一种抽象，容许咱们使用小型、独立和一般可复用的组件构建大型应用

首先咱们须要注册一个组件

Vue.component('EXPle', {
    template: '<li>这是个待办项</li>'
})

而后咱们须要为组件建立一个模板

<ol>
    <EXPle></EXPle>
</ol>

咱们能够用上面刚刚学到的v-for来为几个不一样的标签防止不一样的值
因此组件咱们应当这样

Vue.component('todo-item', {
  // todo-item 组件如今接受一个
  // "prop"，相似于一个自定义属性
  // 这个属性名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

咱们还要运用v-bind将指令穿如不一样的值，因此html应当这样修改

<div id="box">
    <ol>
    <!--
    如今咱们为每一个 todo-item 提供 todo 对象
    todo 对象是变量，即其内容能够是动态的。
    咱们也须要为每一个组件提供一个“key”，晚些时候咱们会作个解释。
    -->
    <todo-item
    v-for="item in groceryList"
    v-bind:todo="item"
    v-bind:key="item.id">
    </todo-item>
    </ol>
</div>

最后，咱们须要为box赋值

var app7 = new Vue({
    el: '#box',
    data: {
    groceryList: [
    { id: 0, text: '世界舞王' },
    { id: 1, text: '尼古拉斯' },
    { id: 2, text: '赵四' }
    ]
    }
})

1.世界舞王
2.尼古拉斯
3.赵四

Vue 初学就到这里了，相信你已经在脑子里肯定了Vue的原理
model-view-viewmodel的概念也已经很是清楚了，但愿你可以在学习Vue的道路上越走越远，最后感谢你的浏览。

喜欢的点个赞呗！