Vue自学官方文档入门【一】
Vue入门之一
1、介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
2、起步
可以通过下面的CDN引入Vue（入门过程中暂时不使用vue-cli）
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
3、声明式渲染
Vue的核心是一个允许采用简洁模板语法来声明式地将数据渲染进DOM的系统
文本插值
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<h1 id="app">{
{message}}h1>
<script>
let vue = new Vue({
el: '#app',
data: {
message: 'hello vue'
}
})
script>
body>
html>
绑定元素attribute
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<h1 id="app">
<span v-bind:title="message">鼠标悬停查看信息span>
h1>
<script>
let vue = new Vue({
el: '#app',
data: {
message: '页面加载于' + new Date().toLocaleString()
}
})
script>
body>
html>
4、条件与循环
v-if和v-for
v-if ：当seen是true时，h1标签显示，是false时，h1标签隐藏。
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<h1 id="app" v-if="seen">你能看到我吗？h1>
<script>
let vue = new Vue({
el: '#app',
data: {
seen: true
}
})
script>
body>
html>
v-for
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<ol>
<li v-for="(todo, index) in todos" :key="index">
{
{todo.text}}
li>
ol>
div>
<script>
let vue = new Vue({
el: '#app',
data: {
todos: [{
text: 'Java' }, {
text: 'Vue' }, {
text: 'Python' }]
}
})
script>
body>
html>
5、处理用户输入
v-on指令添加一个事件监听器，通过它调用在Vue实例中定义的方法。
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<h1 id="app">
<span>{
{message}}span><br />
<button v-on:click="reverseMessage">逆转消息button>
h1>
<script>
let vue = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js'
},
methods: {
/*
* Vue methods中使用箭头函数要注意，this的指向
*/
// reverseMessage: () => {
// console.log(this) //这里this指向windows
// vue.message = vue.message.split('').reverse().join('')
// }
reverseMessage: function () {
console.log(this) //这里this指向vue
this.message = this.message.split('').reverse().join('')
}
}
})
script>
body>
html>
v-model指令实现表单输入和应用状态之间的双向绑定
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<span>{
{message}}span><br />
<input type="text" v-model="message" />
div>
<script>
let vue = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
script>
body>
html>
6、组件化应用构建
组件系统是Vue的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型的应用。
几乎任意类型的应用界面都可以抽象为一个组件树：
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<ul>
<todo-items
v-for="(item, index) in groceryList"
v-bind:key="item.id"
v-bind:todo="item"
>todo-items>
ul>
div>
<script>
Vue.component('todo-items', {
props: ['todo'],
template: `{
{todo.text}} `
})
let vue = new Vue({
el: '#app',
data: {
groceryList: [
{
id: 0, text: '今天要早起' },
{
id: 1, text: '吃午饭' },
{
id: 2, text: '早睡' }
]
}
})
script>
body>
html>