vue教程-学习笔记
2018-10-22 本文已影响43人
张中华
目录
第一章 安装
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 的浏览器。
1.2 Vue Devtool 安装
在google store 中，查询 vue devtools 进行安装， 安装成功显示如下：
1.3 直接<script>引入使用
CND
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
你可以在 cdn.jsdelivr.net/npm/vue 浏览 NPM 包的源代码。
当把基本使用掌握之后，可以根据源码查看vue中常见标签的使用原理。
Vue 也可以在 unpkg 和 cdnjs 上获取 (cdnjs 的版本更新可能略滞后)。
1.4 NPM安装方式
# 最新稳定版
$ npm install vue
[1] 对于中国大陆用户，建议将 NPM 源设置为国内的镜像，可以大幅提升安装速度。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-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<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://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>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<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>
