vue学习第一天 - 安装

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性

下载好vue.js文件，在HTML文件中如正常的js文件引入

开发版本 => 推荐使用，可以调试报错

生成版本 => 删除了警告，意味着不知道自己错在哪

CDN版本 => 保持和 npm 发布的最新的版本一致，看了一下，是2.6版本，最新好像是3.0

// 这个是CDN模式
<script src="https://unpkg.com/vue/dist/vue.js">

NPM安装

在用 Vue.js 构建大型应用时推荐使用 NPM 安装

npm install vue

HTML代码：

{{}}是插值表达式，这是声明式渲染，用来在标签中渲染vue实例对象中data里的数据，只能解析纯文本，不能解析为HTML

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

javascript代码：

let app = new Vue({
    el: '#app',
    data: {
        message: 'vue学习第一天'
    }
})
let app = new Vue({
    el: '#div',
    data: {
        message2: '第二个vue实例'
    }
})

运行结果：

vue学习第一天
第二个vue实例

一、vue实例

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的

let app = new Vue({
    el: '#app',  // 挂载元素
    data: {
        message: 'vue学习第一天' // data是数据，所有的数据都在这里面写
    },
    created: function () {}  // created是vue的生命周期钩子函数，这个有11个，常用的只有八个
})

1、生命周期钩子函数

生命周期钩子函数	作用范围
beforeCreate	el,data都为undefined，还没有初始化
created	data数据有了，但是el依旧undefined，即DOM没有
beforeMount	el和data已经完成初始化，可以使用，但是data里面的内容还没有初始化
mounted	vue实例挂载完成，data成功渲染
beforeUpdate	data更新完成之前触发
updated	data更新完成之后触发
beforeDestroy	组件注销之前触发
destroyed	组件注销之后触发

测试效果：

beforeCreate

beforeCreate: function () {
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.message)
}

====

undefined
undefined
undefined

created

created: function () {
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.message)
}

====

undefined
{message: "vue学习第一天"}
vue学习第一天

beforeMount

beforeMount: function () {
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.message)
}

====

<div id="app">
	{{message}}
</div>
{message: "vue学习第一天"}
vue学习第一天

mounted

mounted: function () {
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.message)
}

====

<div id="app">
	vue学习第一天
</div>
{message: "vue学习第一天"}
vue学习第一天

beforeUpdate

在控制台输入：app.message = '修改message'

beforeUpdate: function () {
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.message)
}

====

<div id="app">
    修改message
</div>
{message: "修改message"}
修改message

updated

在控制台输入：app.message = '修改message'

beforeUpdate: function () {
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.message)
}

====

<div id="app">
    修改message
</div>
{message: "修改message"}
修改message

二、vue拓展实例

使用基础 Vue 构造器，创建一个“子类”，参数是一个包含组件选项的对象 ，data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

<div id="app"></div>
<myvue></myvue>
let vueExtend = Vue.extend({
	template: '<p>{{firstName}}{{lastName}} is {{gender}}</p>',
    data: function () {
        return {
			firstName: '前端',
			lastName: '小白',
			gender: '男孩纸'
        }
    }
})

// 将拓展构造函数实例化，并声明成一个组件，不需要在components里面注入，可以直接使用
new vueExtend().$mount('myvue')
    
// 将拓展构造函数实例化并挂载到一个元素上，有点类似JQ，直接通过类选择器或者id选择器
new vueExtend().$mount('#app')

// 输出结果为：
vue学习第一天
前端小白 is 男孩纸