Article directory
1. Vue.js what is it?
Vue (pronounced /vjuː/) is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with modern toolchains and various supporting libraries(opens new window), Vue is also fully capable of powering complex single-page applications.
2. Vue.js download or install
CDN：<script src=“https://unpkg.com/vue@next”>
NPM
# 最新稳定版
$ npm install vue@next
3. Hello Vue.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
</head>
<body>
<div id="app">
{
{message}}
</div>
<script src="./vue/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: "Hello Vue.js"
}
})
</script>
</body>
</html>
4. { {}}
Data driven view
{
{}} interpolation expression
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
</head>
<body>
<div id="app">
count: {
{counter}}
</div>
<script src="./vue/vue.js"></script>
<script>
new Vue({
el: '#app',
//函数简写
data() {
return{
counter:0
}
},
//会在浏览器dom加载完成之后，执行
mounted() {
setInterval(() => {
this.counter++
},1000)
}
})
</script>
</body>
</html>
5. Property binding
In addition to text interpolation, we can also bind an element's attribute like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
</head>
<body>
<div id="app">
<span v-bind:title="message">鼠标放这来</span>
</div>
<script src="./vue/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return{
message:'page load ' + new Date().toLocaleString()
}
}
})
</script>
</body>
</html>
6. User InterAction
To allow the user to interact with the application, we can use the v-on directive to add an event listener that invokes methods defined in the instance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
</head>
<body>
<div id="app">
<button v-on:click="alert">点我加1</button>
<div>{
{count}}</div>
</div>
<script src="./vue/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
message: 'page load ' + new Date().toLocaleString(),
count:1
}
},
methods: {
alert(){
this.count++;
}
},
})
</script>
</body>
</html>
Note that in this method, we update the state of the application, but do not touch the DOM - all DOM manipulation is handled by Vue, and the code you write only needs to focus on the logic level.
7. Bidirectional data binding
Vue also provides the v-model directive, which makes it easy to implement two-way binding between form inputs and application state
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<div>{
{message}}</div>
</div>
<script src="./vue/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
message: 'page load ' + new Date().toLocaleString(),
}
},
})
</script>
</body>
</html>
8. if and for
Controlling toggling whether an element is displayed is also fairly simple:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
</head>
<body>
<div id="app">
<span v-if="s">看得见我吗</span>
<button @click="reverse">点击切换显示状态</button>
</div>
<script src="./vue/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
s:true
}
},
methods: {
reverse(){
this.s = !this.s;
}
},
})
</script>
</body>
</html>
There are many other commands, each with a special function. For example, the v-for directive can bind array data to render a list of items:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in todos">{
{item.text}}</li>
</ul>
</div>
<script src="./vue/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
todos: [
{
text: 'Learn JavaScript' },
{
text: 'Learn Vue' },
{
text: 'Build something awesome' }
]
}
},
})
</script>
</body>
</html>
9. Component application
The component system is another important concept in Vue because it is an abstraction that allows us to build large applications using small, independent and often reusable components. When you think about it, almost any type of application interface can be abstracted into a tree of components:
In Vue, a component is essentially an instance with predefined options. Registering components in Vue is simple: create a component object as you did with the App object and define it in the components option of the parent component:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
</head>
<body>
<div id="app">
<!-- 使用组件 -->
<hello></hello>
<hel></hel>
</div>
<script src="./vue/vue.js"></script>
<script>
// 组件模板编写
const hello = {
template:`<h1>Hello Vue Component</h1>`
}
const hello1 = {
template:`<h1>Hello Vue</h1>`
}
// 创建Vue实例
new Vue({
// 挂载点，被vue管理
el: '#app',
// 注册一个或多个组件
components:{
// hello组件，简写
hello,
// 完整写法
hel:hello1,
}
})
</script>
</body>
</html>
Fixed, clunky, but this renders the same text for each todo item, which doesn't look cool. We should be able to pass data from the parent component to the child component. Let's modify the definition of the component to accept a prop:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
</head>
<body>
<div id="app">
<!-- 使用组件 -->
<ul>
<hello v-for="i in arrs" v-bind:arrs="i" v-bind:key="i.id"></hello>
</ul>
</div>
<script src="./vue/vue.js"></script>
<script>
// 组件模板编写
const hello = {
props: ['arrs'],
template: `<li>{
{arrs.item}}</li>`
}
// 创建Vue实例
new Vue({
// 挂载点，被vue管理
el: '#app',
data: {
arrs: [
{
id: 1,
item: '小刘'
},
{
id: 2,
item: '小张'
}
]
},
// 注册一个或多个组件
components: {
// hello组件，简写
hello
}
})
</script>
</body>
</html>
