Author
You Yuxi, Chinese, creator of Vue.js, founder of Vue Technology, is committed to Vue research and development.
An interview about the author: https://www.jianshu.com/p/3092b382ee80
Attach an idol photo:
About Vue
Vue (pronunciation / vjuː /, similar to view) is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from bottom to top. Vue's core library only focuses on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with a modern tool chain and various support libraries, Vue is also fully capable of driving complex single-page applications.
Features (it ’s good anyway, just use it)
- Complete documentation, Chinese support is super friendly
- Powerful peripheral system
- Easy to use
- Easy to integrate with other code bases
- The core file is small
- Component development
- Virtual Document Object Model (Virtual DOM), excellent performance
- The concept of a progressive framework, that is, "it is both a framework and not a framework"
- Provide a framework of single-file components compiled as ES modules that support hybrid preprocessors
installation
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Understand how template-Vue generates Html
Example-1
Use {{}} to embed the data in js into HTML
HTML files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue-01-hello</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/start.js"></script>
</body>
</html>
JS file
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!我来啦！',
}
})
Results of the
Example-2
// 将message内容拆分，倒序，再组合。
{{ message.split('').reverse().join('') }}
// 将name字符串和指定字符串拼接
{{ name + '-slfsjflsfs'}}
// 打印todo中的数据
{{ todo }}
// 判断isBusy真假，如果为true执行"非常忙"，为false则执行"不怎么忙"
{{ isBusy ? "非常忙" : '不怎么忙' }}
// 模板中显示的值始终为字符串
// 例如myHtml: '<p style="color:red">这里是纯html</p>'
// 显示内容为：用模板显示： <p style="color:red">这里是纯html</p>
用模板显示： {{ myHtml }}
// 如果要用html显示变量中值，则使用 v-html
// 格式 v-html="变量"
<span v-html="myHtml"></span>
HTML files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue-02-模板</title>
</head>
<body>
<div id="app">
{{ message.split('').reverse().join('') }}
<div>
{{ name + '-slfsjflsfs'}}
</div>
<div>
{{ todo }}
</div>
<h3>现在忙不忙？</h3>
<p>{{ isBusy ? "非常忙" : '不怎么忙' }}</p>
<div>
用模板显示： {{ myHtml }}
</div>
<div>
用v-html显示
<span v-html="myHtml"></span>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/start.js"></script>
</body>
</html>
JS file
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!我来啦！',
name: 'Riy' + 'aaabbb',
todo: '学习Vue',
isBusy: false,
myHtml: '<p style="color:red">这里是纯html</p>',
}
})
Results of the
Vue page rendering and binding
Rendering
// v-show控制html是否显示，为true时显示，为false是隐藏
<div v-show="true">v-show ???</div>
// 迭代对象数组中 index为索引值，todo为数组的每一项
v-for="(todo, index) in todoList"
// 迭代对象时，key为键，item为值
v-for="(item, key) in user"
// 样式绑定，这里使用了3种方式，其中 v-bind: 可简写为 :
// class直接绑定样式，绑定属性或属性数值
class="error"
v-bind:class="test1"
:class="[activeClass, errorClass]"
// v-model双向绑定（重要！）
// 三种修饰符，lazy：控制输入数据同步、number：控制数据为int，trim：去掉前后空格
// placeholder="edit me" 输入框默认值为 edit me
// 使用v-model，输入框默认值变为属性值
<input v-model.lazy="message" placeholder="edit me">
HTML files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.active {
background-color: yellow;
}
.error {
color: red;
border: 1px solid red;
font-size: 20px;
}
</style>
<title>vue-03-渲染和绑定</title>
</head>
<body>
<div id="app">
<!-- 这里是条件渲染，使用v-if -->
<div v-if="isShow">
这是v-if为真显示的
</div>
<div v-else>
这是v-if为假显示的
</div>
<hr>
<div v-if="username=='Riy'">
这是:名字等于Riy
</div>
<div v-else-if="username=='lilei'">
这是:名字等于lilei
</div>
<div v-else>
这是 v-else，username={{ username }}
</div>
<hr>
<div v-show="true">
v-show ???
</div>
<hr>
<h2>v-for</h2>
<ul>
<li v-for="(todo, index) in todoList" :key="todo.id">
{{ index }} -- {{ todo.date }} : {{ todo.thing }}
</li>
</ul>
<ul>
<li v-for="(item, key) in user" :key="item.id">
{{ key }} : {{ item }}
</li>
</ul>
<hr>
<h2>样式绑定</h2>
<p class="active">这是样式绑定的示例</p>
<p class="error">这是样式绑定的示例-警告</p>
<p v-bind:class="test1">测试1</p>
<p :class="test2">测试2</p>
<p :class="[activeClass, errorClass]">测试3</p>
<hr>
<!-- v-model双向绑定，重要！！！ -->
<h2>v-model双向绑定</h2>
<input v-model.lazy="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<input v-model.number="num" placeholder="edit me">
<p>num is: {{ num }}</p>
<input v-model.trim="trimstr" placeholder="edit me">
<p>trimstr is: {{ trimstr }}</p>
<hr>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/start.js"></script>
</body>
</html>
JS file
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!我来啦！',
num: '字符转数字',
isShow: false,
trimstr: 'trim去掉空格',
username: 'hahhaha',
todoList: [
{date: '1.1', thing: '元旦快乐'},
{date: '3.12', thing: '植树节种树'},
{date: '5.8', thing: '劳动节'},
{date: '10.3', thing: '国庆节睡大觉'},
],
user: {
username: 'Riy',
password: '123123',
age: 23,
city: 'beijing'
},
test1: {
active: false
},
test2: {
active: true,
error: true
},
activeClass: 'active',
errorClass: 'error',
}
})
Results of the
Binding
// v-on用于绑定事件，可简写为@
<button v-on:click="counter -= 1">减 1</button>
<button @click="counter -= 1">@@@减 1</button>
// 执行greet方法，逐层打印
<button @click="greet">Greet</button>
// 鼠标点击输入框，执行上层方法say，按按钮后再次执行say方法
// 两种事件修饰符，stop：停止事件冒泡传播，prevent：阻止默认行为
// 这里如果去掉.stop，则在执行button标签中的方法后会继续执行上层div的方法
<div class="error" @click="say('我是上层div')">
这里有个外层div
<input type="text" v-model="message">
<button @click.stop="say(message)">显示： {{message}}</button>
</div>
// @keyup.enter监听键盘回车事件
// 两种事件修饰符，stop：停止事件冒泡传播，prevent：阻止默认行为
// 这里如果去掉.prevent弹窗后会报错，因为submit默认会提交到action地址的后端，这里没有，所有会报错
<form action="">
<input type="text" @keyup.enter="submit('点击回车')">
<input type="submit" value="提交" @click.prevent="submit('提交数据')">
</form>
HTML files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.active {
background-color: yellow;
}
.error {
color: red;
border: 1px solid red;
font-size: 20px;
}
</style>
<title>vue-04-事件</title>
</head>
<body>
<div id="app">
<h2>事件</h2>
<button v-on:click="counter -= 1">减 1</button>
<button @click="counter -= 1">@@@减 1</button>
<p>点击按钮，counter= {{ counter }} .</p>
<hr>
<!-- `greet` 是在下面定义的方法名 -->
<button @click="greet">Greet</button>
<div class="error" @click="say('我是上层div')">
这里有个外层div
<input type="text" v-model="message">
<button @click.stop="say(message)">显示： {{message}}</button>
</div>
<hr>
<form action="">
<input type="text" @keyup.enter="submit('点击回车')">
<input type="submit" value="提交" @click.prevent="submit('提交数据')">
</form>
<hr>
<input type="text" @keyup.enter="submit('点击回车')">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/start.js"></script>
</body>
</html>
JS file
var app = new Vue({
el: '#app',
data: {
counter: 100,
message: 'Hello Vue!我来啦！',
methods: {
greet: function(event) {
alert('hahhaha!');
if (event) {
alert(event.target.tagName)
}
},
say: function(msg) {
alert(msg);
},
submit: function(data){
alert(data);
}
}
})