Vue.js 教程
文章目录
- 0. 简介
- 1. Hello, world!
- 2. 模板语法
-
- 2.1 文本
- 2.2 HTML
- 2.3 属性
- 2.4 表达式
- 2.5 用户输入
- 2.6 过滤器
- 2.7 缩写
- 未完待续。。。
0. 简介
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单（假的）。
1. Hello, world!
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>你好，世界title>
<script src="//cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js">script>
head>
<body>
<div id="app">
<p>{
{ message }}p>
div>
<script>
new Vue({
el: '#app',
data: {
message: '你好，我是Vue.js！',
}
})
script>
body>
html>
接下来展示一个复杂一些的示例。
在Vue构造器中有一个 el 参数，它是DOM元素的id，指定后意味着接下来的改动都在这个元素内，不会超出这个范围。
data 用于定义属性；methods 用于定义函数；{ { }}是模板语法。
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>你好，世界title>
<script src="//cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js">script>
head>
<body>
<div id="app">
<div id="vue_det">
<h1>网站 : {
{ site }}h1>
<h1>网址 : {
{ url }}h1>
<h1>耿鸭 : {
{ gh() }}h1>
div>
<div>
<button @click="change">修改button>
div>
div>
<script>
new Vue({
el: '#app',
data: {
site: '耿鸭的网站',
url: '特别好！',
},
methods: {
gh: function () {
return "我是耿耿！";
},
change: function () {
alert("我被点击了！");
this.site = '耿鸭 -> 菜鸭';
},
},
})
script>
body>
html>
2. 模板语法
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
2.1 文本
使用双大括号{ {…}}进行文本插值。
示例见第1节。
2.2 HTML
使用 v-html 指令输出HTML代码。注意与双大括号的区别。
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>你好，世界title>
<script src="//cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js">script>
head>
<body>
<div id="app">
<div v-html="content">div>
<div>{
{ message }}div>
div>
<script>
new Vue({
el: '#app',
data: {
content: '帅气的耿鸭
',
message: '美丽的菜鸭
',
},
})
script>
body>
html>
2.3 属性
HTML属性中的值应使用 v-bind 指令。
属性包括style样式属性和其他属性，用法是不太一样的，详见以下示例：
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>你好，世界title>
<script src="//cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js">script>
head>
<body>
<div id="app">
<div v-bind:style="{
color: textColor }" v-bind:hidden="hidden">猜猜我是什么颜色div>
<div>
<button @click="toggle_color">变色button>
<button @click="toggle_hidden">显示/隐藏button>
div>
div>
<script>
new Vue({
el: '#app',
data: {
textColor: 'green',
hidden: false,
},
methods: {
toggle_color: function () {
if (this.textColor === 'green') {
this.textColor = 'red';
} else {
this.textColor = 'green';
}
},
toggle_hidden: function () {
this.hidden = !this.hidden;
},
},
})
script>
body>
html>
2.4 表达式
在模板中可以使用JavaScript表达式。
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>你好，世界title>
<script src="//cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js">script>
head>
<body>
<div id="app">
<div>
鸭鸭今年的岁数：{
{ 10 + 10 }}
div>
<div v-bind:style="{
color: ok ? 'green' : 'red' }">
{
{ ok ? '好的' : '差的' }}
div>
<div>
<button @click="toggle">切换button>
div>
div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
},
methods: {
toggle: function () {
this.ok = !this.ok;
},
},
})
script>
body>
html>
2.5 用户输入
v-model 指令用来在input、select、textarea、checkbox、radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应，正如之前演示的那样。
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>你好，世界title>
<script src="//cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js">script>
head>
<body>
<div id="app">
<div>
<input type="text" v-model="msg">
div>
<div>
您输入的内容是：{
{ msg }}
div>
div>
<script>
new Vue({
el: '#app',
data: {
msg: '初始文本',
},
})
script>
body>
html>
2.6 过滤器
2.7 缩写
