Vue入门
注：此文档笔记来自于imooc-vue2.5入门 课程(https://www.imooc.com/learn/980)
创建第一个Vue实例
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue实例title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="root">{{msg}}
<div>{{msg}}div>
div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello world",
}
})
script>
body>
html>
引入Vue.js的脚本标签要放在head中，可以防止出现抖屏的情况，body中的称为挂载点，div标签中的内容称为模板。{{msg}}称为插值表达式。
new Vue({
el:"#root",
data:{
msg:"hello world",
}
})
称为一个实例，其中el是将此实例绑定到所属的id元素上，之后此dom元素就被实例化的Vue接管。
数据、事件与方法
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue实例title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="root">
<div v-text="msg">div>
<div v-text="content">div>
<div v-html="content">div>
div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello world",
content:"hello world
",
}
})
script>
body>
html>
v-text会转义字符串，v-html不会转义，此处的转义是指会不会翻译成HTML标签
点击事件
点击页面上显示的hello。变成world
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue实例title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="root">
<div v-on:click="handleClick">{{msg}}div>
div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello",
},
methods:{
handleClick: function(){
this.msg="world"
}
}
})
script>
body>
html>
v-on:click可简写为@click
属性绑定和双向数据绑定
属性绑定
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue实例title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="root">
<div v-bind:title="title">{{msg}}div>
div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello",
title:"this is a title",
}
})
script>
body>
html>
v-bind:title="title"属性绑定，后边的title不在是简单的字符串，而是一个js表达式，可以写成v-bind:title="'123'+title"，v-bind:title="title"可简写成:title="title"
双向数据绑定
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue实例title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="root">
<input v-model="msg"/>
<div >{{msg}}div>
div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello",
}
})
script>
body>
html>
注意看其中标签，其中的v-model可实现数据的双向绑定，即通过输入框可以改变msg的值
Vue中的计算属性
<html>
<head>
<meta charset="utf-8">
<title>Vue中的计算属性title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="root">
<input v-model="num1" type="number"/>
<div>+div>
<input v-model="num2" type="number"/>
<div>{{result}}div>
div>
<script>
new Vue({
el:"#root",
data:{
num1:0,
num2:0,
},
methods:{
handleClick: function(){
this.msg="world"
}
},
computed:{
result: function(){
return Number(this.num1)+Number(this.num2)
}
}
})
script>
body>
html>
v-if、v-show
点击按钮控制内容的显示和隐藏
<html>
<head>
<meta charset="utf-8">
<title>v-if、v-showtitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="root">
<button @click="handleClick">on/offbutton>
<div v-if="show">{{msg}}div>
div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello world",
show:true
},
methods:{
handleClick: function()
{
this.show=!this.show;
}
}
})
script>
body>
html>
标签div的属性v-if为真时显示，为假时隐藏，监听按钮动作，点击按钮显示/隐藏内容
也可以使用v-show来替换v-if，页面效果相同，都是点击按钮显示隐藏内容，但是v-if为false时会将此dom元素从源码中删除，v-show会改变dom元素的display属性，此不同之处可通过查看网页源代码得出
v-for
遍历列表循环展示列表
<html>
<head>
<meta charset="utf-8">
<title>v-fortitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="root">
<div>{{msg}}div>
<ul>
<li v-for="(item,index) of list">{{item}}li>
ul>
div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello world",
list:[1,2,3]
}
})
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>v-fortitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="root">
<div>{{msg}}div>
<ul>
<li v-for="(item,index) of list">{{item}}/{{index}}li>
ul>
div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello world",
list:[1,2,3]
}
})
script>
body>
html>