30分钟小白级入手vue教程

时间 2019-11-06

标签 30分入手 vue 教程繁體版

原文原文链接

王眫子刚刚毕业不久，小白实力，把一些基础知识总结一下，也行对新人会有一些帮助javascript

vue介绍

vue是一个前端框架，是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得咱们可以快速地上手并使用Vue.js。css

若是你以前已经习惯了用jQuery操做DOM，学习Vue.js时请先抛开手动操做DOM的思惟，由于Vue.js是数据驱动的，你无需手动操做DOM。它经过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你建立了绑定，DOM将和数据保持同步，每当变动了数据，DOM也会相应地更新。html

1、第一个Vue（读音：view）

首先在在Vue官网下载vue.js文件。前端

!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
 <p id="app">
  <p>{{title}}</p>
  <button @click="say()">单击事件</button></br>
  <p>今年{{age}}</p>
  <input v-model="age">
 </p>
</body>
</html>
<script src="lib/vue.js"></script>
<script src="js/hello.js"></script>
var app = new Vue({  //经过构造函数Vue就能够建立一个Vue的根实例，并启动Vue应用
 el: '#app', //指定页面上一个已经存在的DOM元素来挂载Vue实例
 data: {  //对象的数据
  title: 'hello vue', //经过插值语法{{}}绑定
  age: 22  //经过v-model进行双向数据绑定
 },
 methods: { //对象的方法
  say: function(){
   console.log(this.title);
  }
 },
 watch: { //监听数据的变化
  'age': function(newVal, oldVal){
   console.log(newVal, oldVal);
  }
 }
});
复制代码

html代码，view层，模板 */
  <div id="app">
        {{ message }}
    </div>
    /* 引入相关文件，然建立实例，在实例中写各类方法就ok了 */
    <script src="vue_2.2.0.js"></script>
    <script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function () {
        let data = {
            message: 'hello,Vue'
        }
      //vm实例
        var vm = new Vue({
            el: '#app',  //挂载元素
            data: data
        });
    },false);
</script>
复制代码

Vue特点—数据双向绑定：数据模型(model)与视图(view)组件的自动同步。vue

涉及到知识点：指令 v-model=""

<div id="app">
   <input type="text" placeholder="请输入" v-model="message" /> /* 将message绑定到当前元素并监听其变化 */
   <br />
   <p>数据：{{ message }}</p>
</div>
<script src="vue_2.2.0.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function () {
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello,Datura!!!'
            }
        });
    },false);
</script>
复制代码

2、Vue实例

Vue实例，每个应用都是经过Vue这个构造函数建立根实例（root instance）启动New Vue（选项对象）。须要传入选项对象，对象包含挂在元素，数据，模板、方法等。 el：挂载元素选择器 --- String|HtmlElement data：代理数据 --- Object|Function methods：定义方法 --- Object Vue代理data数据，每一个vue实例都会代理其data对象里全部的属性，这些被代理的属性是响应的。新添加的属性不具有响应功能，改变后不会更新视图。 Vue实例自身属性和方法，暴露自身的属性和方法,以“el、$data。java

var vm = new Vue({
       el: '#app',
       data: {
          message: 'hello,Datura!!!'
        }，
        methods: {
            test (){
                alert(1);
            }
        },
        compontents:{
        //这里存放组件
        }
     });
  /* vm就是new出来的实例 */
  console.log(vm.$data);//也就是数据data，后面还有不少挂载在vm（new出来的）实例上的属性
复制代码

3、声明式渲染

声明式---只须要声明在哪里（where）作什么（what），而无需关心如何实现（how）es6

命令式---须要具体代码表达在哪里（where）作什么（what），如何实现（how）api

例子：求数组中每一项的倍数

命令式：使用for循环拿出每一项，而后计算完成后，再放到另外一个数中数组

//定义一个新的空数组，而后利用for循环，每一步每一步地放入其中
      var arrNew = [];
        for (var i=0;i<arr.length;i++){
            arrNew.push(arr[i]*2);
      }
复制代码

声明式：使用es6的map方法，关注如何取值bash

//将原数组（arr）中利用map函数，传入每一项
        var arrNew = arr.map(function (item) {
            return item*2
        })
复制代码

3. 声明式渲染

初始化根实例，vue自动将数据绑定在DOM模板上因此能够看出数据在vue实例中定以，在利用“{{ xxx }}”模板中展现。具体怎么过去的咱们不关注

4、Vue指令

什么是指令：

是一种特殊的自定义行间属性（也就是在html标签内写）；指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM上，在Vue中，指令以“v-”开头 Vue中的内置指令：查看更多

v-bind：动态绑定数据。简写为“:” 。=> 之后的:class="{red:boolean}"
v-on ：绑定时间监听器。简写为“@”，例：@click="xxx"；
v-text ：更新数据，会覆盖已有结构。相似{{ msg }} ；
v-show ：根据值的真假，切换元素的display属性；
v-if ：根据值的真假，切换元素会被销毁、重建； => 在dom中已消失
v-else-if ：多条件判断，为真则渲染；
v-else ：条件都不符合时渲染；
v-for ：基于源数据屡次渲染元素或模块；
v-model ：在表单控件元素（input等）上建立双向数据绑定（数据源）；
v-pre ：跳过元素和子元素的编译过程；
v-once ：只渲染一次，随后数据更新也不从新渲染；
v-cloak ：隐藏未编译的Mustache语法，在css中设置[v-cloak]{display:none;}
复制代码

5、Vue模版

1. html模版

html模版：基于DOM的模版，模版都是可解析的有效的HTML 插值：文本：使用“Mustache”语法（大括号）{{ value }}；做用：替换实例上的属性值，当值改变时，插值内容会被自动更新。也可以使用v-text="value"代替。

<p>{{ value }}<p> 等价于 <p v-text="value"></p>
复制代码

原生的html：双大括号输出的文本，不会解析html标签。也就是说当实例的data为html标签时，不能解析而是直接输出出来。此时如想要解析，可以使用v-html="value"代替。

new Vue({
    data:{
        value: `<span>我是一个span标签</span>`
    }
});
<p>{{ value }}<p>   页面展现  =>  <span>我是一个span标签</span> 
<p v-html="value"><p>   页面展现  =>  我是一个span标签 
复制代码

须要注意的是，有时候由于一些网络延迟等缘由，用户会在也买年中先看到{{ xxx }}，而后才有数据。咱们若想避免此效果，可用v-text="xxxx"代替。

<h2 :class="{red:show}">标题</h2> => 注意此处的show为data内的一个布尔值数据，若真则添加red的class，若假则移除red的class
使用javascript表达式：能够写简单的表达式。（能够简单的三目运算，可是不能够写if语句），之后会有计算属性。
{ 1+2 }
{ true? "yes":"no" }
复制代码

2. 字符串模版

template字符串

tempalte => 选项对象的属性模版将会替换挂载的元素。挂载元素的内容都会被忽略，根节点只有一个，将html结构写在一对script标签中，设置type="x-template"。

<body>
    <div id="box">

    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function () {
        var str = '<h2>hello pink!</h2>'
        var vm = new Vue({
            el: '#box',
            template: str
        });
    },false);
</script>
复制代码

说明权重比较高，直接“代替”挂载点，把原来的html替换后显示

//代码片断这个就是利用script标签对内定义模版，局限性：不能跨文件使用，一个页面中可使用
<body>
    <div id="box">

    </div>
</body>
<script src="vue.js"></script>
<script type="x-template" id="str">
    <p>我是一个p标签</p>
</script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function () {
        var vm = new Vue({
            el: '#box',
            template: '#str'
        });
    },false);
</script>
复制代码

//代码片断放在template标签里，并给一个id名
<body>
    <template id="tem">
        <p>我是template</p>
    </template>
    <div id="box">

    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function () {
        var vm = new Vue({
            el: '#box',
            template: '#tem'
        });
    },false);
</script>
复制代码

数据对象属性

class: {}, => 绑定class，和v-bind:class同样的API
style: {}, => 绑定样式，和v-bind:style同样的API
attrs: {}, => 添加行间属性
domProps: {}, => DOM元素属性
on: {}, => 绑定事件
nativeOn: {}, => 监听原生事件
directives: {}, => 自定义指令
scopedSlots: {}, => slot做用域
slot: {}, => 定义slot名称 和组件有关系，插曹
key: "key", => 给元素添加惟一标识
ref: "ref", => 引用信息
复制代码

这一期的内容就结束了，敬请期待下一篇，本内容来自于互联网和王眫子修改，但愿对你们会有一点

30分钟 小白级入手vue教程