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的系统
文本插值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 要在下面的vue对象新建之前引入 -->
<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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<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
标签隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<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实例中定义的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<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指令实现表单输入和应用状态之间的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<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的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型的应用。
几乎任意类型的应用界面都可以抽象为一个组件树:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<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: `<li>{{todo.text}}</li>`
})
let vue = new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: '今天要早起' },
{ id: 1, text: '吃午饭' },
{ id: 2, text: '早睡' }
]
}
})
</script>
</body>
</html>