vue官方教程学习笔记- 安装、介绍、生命周期

墨蓝 2021-06-24 16:10 417阅读 0赞

## 目录 ##

## 第一章 安装 ##

#### 1.1 兼容性 ####

#### 1.2 Vue Devtool 安装 ####

#### 1.3 直接<script>引入使用 ####

#### 1.4 NPM安装方式 ####

## 第二章 介绍 ##

#### 2.1 vue是什么？ ####

#### 2.2 vue 简单使用 ####

## 第三章 生命周期 ##

--------------------

## 第一章 安装 ##

#### 1.1 兼容性 ####

Vue **不支持** IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有[兼容 ECMAScript 5 的浏览器][ECMAScript 5]。

#### 1.2 Vue Devtool 安装 ####

在google store 中，查询 vue devtools 进行安装， 安装成功显示如下：

![2789632-a7ed9f4aa8f900dc.png][]

#### 1.3 直接<script>引入使用 ####

CND

你可以在 [cdn.jsdelivr.net/npm/vue][cdn.jsdelivr.net_npm_vue] 浏览 NPM 包的源代码。  
当把基本使用掌握之后，可以根据源码查看vue中常见标签的使用原理。  
Vue 也可以在 [unpkg][] 和 [cdnjs][] 上获取 (cdnjs 的版本更新可能略滞后)。

#### 1.4 NPM安装方式 ####

# 最新稳定版
    $ npm install vue

\[1\] 对于中国大陆用户，建议将 NPM 源设置为[国内的镜像][Link 1]，可以大幅提升安装速度。**or yarn**.

## 第二章 介绍 ##

#### 2.1 vue是什么？ ####

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

#### 2.2 vue 简单使用 ####

常见用法：  
\{ \{ message \}\}  
v-bind:title="message"  
v-if="seen"  
v-for="todo in todos"  
v-on:click="reverseMessage  
v-model="message"

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue起步</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    
    <div id="app">
        {
        { message }}
    </div>
    <script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '声明式渲染'
        }
    })
    </script>
    
    <div id="app-2">
      <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
      </span>
    </div>
    
    <script>
        var app2 = new Vue({
            el: '#app-2',
            data: {
                message: '页面加载于 ' + new Date().toLocaleString()
            }
        })
    </script>
    
    <div id="app-3">
        <p v-if="seen">现在你看到我了, 条件语句</p>
    </div>
    
    <script>
        var app3 = new Vue({
            el: '#app-3',
            data: {
                seen: true
            }
        })
    </script>
    
    <div id="app-4">
        <ol>
            <li v-for="todo in todos">
                {
        { todo.text }}
            </li>
        </ol>
    </div>
    
    
    <script>
        var app4 = new Vue({
            el: '#app-4',
            data: {
                todos: [
                    { text: '学习 JavaScript' },
                    { text: '学习 Vue' },
                    { text: '整个牛项目' }
                ]
            }
        })
    </script>
    
    <div id="app-5">
        <p>{
        { message }}</p>
        <button v-on:click="reverseMessage">逆转消息</button>
    </div>
    <script>
        var app5 = new Vue({
            el: '#app-5',
            data: {
                message: 'Hello Vue.js!'
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })
    </script>
    
    <div id="app-6">
        <p>{
        { message }}</p>
        <input v-model="message">
    </div>
    
    <script>
        var app6 = new Vue({
            el: '#app-6',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
    
    <div id="app-7">
        <ol>
            
            <todo-item1
                    v-for="item in groceryList"
                    v-bind:todo="item"
                    v-bind:key="item.id">
            </todo-item1>
        </ol>
    </div>
    <script>
        Vue.component('todo-item1', {
            props: ['todo'],
            template: '<li>{
        { todo.text }}</li>'
        })
        var app7 = new Vue({
            el: '#app-7',
            data: {
                groceryList: [
                    { id: 0, text: '蔬菜' },
                    { id: 1, text: '奶酪' },
                    { id: 2, text: '随便其它什么人吃的东西' }
                ]
            }
        })
    </script>
    </body>
    </html>

## 第三章 生命周期 ##

学习地址：[https://segmentfault.com/a/1190000008010666?utm\_source=tag-newest][https_segmentfault.com_a_1190000008010666_utm_source_tag-newest]

![2789632-e6b9c14a46552303.png][]

![2789632-df0af2d6a28ddd30.png][]

创建一个项目：  
[https://www.cnblogs.com/huihuijiang/p/8252851.html][https_www.cnblogs.com_huihuijiang_p_8252851.html]  
npm install -g vue-cli  
vue init webpack Vue-Project

<template>
      <div class="hello">
        <h1>{
        { msg }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      beforeCreate: function () {
        console.group('------beforeCreate创建前状态------')
        console.log('beforeCreate: print hello world')
      },
      created: function () {
        console.group('------created创建完毕状态------')
        console.log('created: print hello world')
      },
      beforeMount: function () {
        console.group('------beforeMount挂载前状态------')
        console.log('beforeMount: print hello world')
      },
      mounted: function () {
        console.group('------mounted 挂载结束状态------')
        console.log('mounted: print hello world')
      },
      beforeUpdate: function () {
        console.group('beforeUpdate 更新前状态===============》')
        console.log('beforeUpdate: print hello world')
      },
      updated: function () {
        console.group('updated 更新完成状态===============》')
        console.log('updated: print hello world')
      },
      beforeDestroy: function () {
        console.group('beforeDestroy 销毁前状态===============》')
        console.log('beforeDestroy: print hello world')
      },
      destroyed: function () {
        console.group('destroyed 销毁完成状态===============》')
        console.log('destroyed: print hello world')
      }
    }
    </script>
    
    
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>

![2789632-9b2f22536716ed54.png][]

[ECMAScript 5]: https://links.jianshu.com/go?to=https%3A%2F%2Fcaniuse.com%2F%23feat%3Des5
[2789632-a7ed9f4aa8f900dc.png]: /images/20210615/491a9444f5d042368e4d72642aae7d91.png
[cdn.jsdelivr.net_npm_vue]: https://links.jianshu.com/go?to=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue%2F
[unpkg]: https://links.jianshu.com/go?to=https%3A%2F%2Funpkg.com%2Fvue%402.5.17%2Fdist%2Fvue.js
[cdnjs]: https://links.jianshu.com/go?to=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fvue%2F2.5.17%2Fvue.js
[Link 1]: https://links.jianshu.com/go?to=https%3A%2F%2Fnpm.taobao.org%2F
[https_segmentfault.com_a_1190000008010666_utm_source_tag-newest]: https://links.jianshu.com/go?to=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000008010666%3Futm_source%3Dtag-newest
[2789632-e6b9c14a46552303.png]: /images/20210615/a1f3a72497eb44d281c3f03942f6822b.png
[2789632-df0af2d6a28ddd30.png]: /images/20210615/fd287eeffa8e40e7a87d171dea66d82d.png
[https_www.cnblogs.com_huihuijiang_p_8252851.html]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.cnblogs.com%2Fhuihuijiang%2Fp%2F8252851.html
[2789632-9b2f22536716ed54.png]: /images/20210615/7726556b2b0944d3b928ad338265e909.png