@TOC
- 推荐Vscode编译器、vue官网：https://cn.vuejs.org/v2/guide/installation.html
一、vue的template
前端代码规范：缩进两个空格 打开：文件---首选项---用户片段---新建
{
// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"vue": {
"prefix": "vue",
"body": [
"<!DOCTYPE html>",
"<html lang='en'>",
"<head>",
" <meta charset='UTF-8'>",
" <meta name='viewport' content='width=device-width, initial-scale=1.0'>",
" <title>Document</title>",
"</head>",
"<body>",
"<div id='app'>",
" {{message}}",
"</div>",
"<script src='../js/vue.js'></script>",
"<script>",
" const app = new Vue({",
" el:'#app', //用于挂载要管理的元素",
" data:{ //定义数据",
" message: '你好啊，李银河！',",
" name: 'codewhy'",
" }",
" })",
"</script>",
"</body>",
"</html>",
],
"description": "vue实例对象"
}
}使用：直接输入prefix的值，回车即可。
二、Mustache插值语法
注：大括号插值法{{message}}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='app'>
<!-- mustache语法，不仅仅可以直接写变量，也可以写简单的表达式 -->
{{firstname + " "+ lastname}}
{{counter * 2}}
</div>
<script src='../js/vue.js'></script>
<script>
const app = new Vue({
el:'#app', //用于挂载要管理的元素
data:{ //定义数据
message: '你好啊，李银河！',
firstname: 'codewhy',
lastname: 'byy',
counter: 100
}
})
</script>
</body>
</html>三、v-once
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='app'>
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script src='../js/vue.js'></script>
<script>
const app = new Vue({
el:'#app', //用于挂载要管理的元素
data:{ //定义数据
message: '你好啊，李银河！',
name: 'codewhy'
}
})
</script>
</body>
</html>注：只在第一次渲染，后面不会渲染。
四、v-html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='app'>
<h2 >{{url}}</h2>
<h2 v-html="url"></h2>
</div>
<script src='../js/vue.js'></script>
<script>
const app = new Vue({
el:'#app', //用于挂载要管理的元素
data:{ //定义数据
message: '你好啊，李银河！',
url: '<a href="www.baidu.com">百度一下</a>'
}
})
</script>
</body>
</html>注：解析标签
五、v-text
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='app'>
<h2 v-text="message"></h2>
</div>
<script src='../js/vue.js'></script>
<script>
const app = new Vue({
el:'#app', //用于挂载要管理的元素
data:{ //定义数据
message: '你好啊，李银河！',
name: 'codewhy'
}
})
</script>
</body>
</html>注：不推荐，不灵活，不如Mustache
六、v-pre
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='app'>
<h2 v-pre>{{message}}</h2>
<h2>{{message}}</h2>
</div>
<script src='../js/vue.js'></script>
<script>
const app = new Vue({
el:'#app', //用于挂载要管理的元素
data:{ //定义数据
message: '你好啊，李银河！',
name: 'codewhy'
}
})
</script>
</body>
</html>注：原封不动的显示，不解析数据
七、v-cloak
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id='app' v-cloak>
{{message}}
</div>
<script src='../js/vue.js'></script>
<script>
//在vue解析之前，div中有一个属性v-cloak
//在vue解析之后，div中没有一个属性v-cloak
setTimeout(function(){
const app = new Vue({
el:'#app', //用于挂载要管理的元素
data:{ //定义数据
message: '你好啊，李银河！',
name: 'codewhy'
}
})
},1000)
</script>
</body>
</html>注：因为html从头到尾渲染，为了避免某些数据来不及渲染，我们可以通过v-cloak来设置style属性，没有渲染成功之前，显示为空，而不是直接是{{message}}。
八、v-bind基本使用🚜
注：前面主要针对模板的内容，属性需要v-bind
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='app'>
<!-- 这里是错误的，不可以使用mustache语法 -->
<!-- <img src="{{imgurl}}" alt=""> -->
<!-- 正确做法 -->
<img v-bind:src="imgurl" alt="">
<a v-bind:href="aHref" >百度一下</a>
</div>
<script src='../js/vue.js'></script>
<script>
const app = new Vue({
el:'#app', //用于挂载要管理的元素
data:{ //定义数据
message: '你好啊，李银河！',
name: 'codewhy',
imgurl: "https://pic4.zhimg.com/v2-589b604591675be07573676ddcab2ff4_720w.jpg?source=d6434cab",
aHref: 'https://www.baidu.com'
}
})
</script>
</body>
</html>- 语法糖：直接写
:
九、v-bind动态绑定class属性（对象语法）🚜
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<style>
.active{
color:red;
}
</style>
</head>
<body>
<div id='app'>
<!-- 字符串没有意义 -->
<!-- <h2 class="active">{{message}}</h2>
<h2 :class="active">{{message}}</h2> -->
<!-- 对象绑定，有意义 -->
<!-- <h2 :class="{类名1:boolean,类名2:boolean}">{{message}}</h2> -->
<h2 class="title" :class="{active:isActive,line:isLine}">{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script src='../js/vue.js'></script>
<script>
const app = new Vue({
el:'#app', //用于挂载要管理的元素
data:{ //定义数据
message: '你好啊，李银河！',
isActive: true,
isLine: true,
},
methods:{
btnClick:function(){
this.isActive = !this.isActive
}
}
})
</script>
</body>
</html>简化：当class属性太长的时候
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<style>
.active{
color:red;
}
</style>
</head>
<body>
<div id='app'>
<!-- 字符串没有意义 -->
<!-- <h2 class="active">{{message}}</h2>
<h2 :class="active">{{message}}</h2> -->
<!-- 对象绑定，有意义 -->
<!-- <h2 :class="{类名1:boolean,类名2:boolean}">{{message}}</h2> -->
<h2 class="title" :class="getClasses()">{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script src='../js/vue.js'></script>
<script>
const app = new Vue({
el:'#app', //用于挂载要管理的元素
data:{ //定义数据
message: '你好啊，李银河！',
isActive: true,
isLine: true,
},
methods:{
btnClick:function(){
this.isActive = !this.isActive
},
getClasses:function(){
return {active:this.isActive,line:this.isLine}
}
}
})
</script>
</body>
</html>十、v-bind动态绑定class属性（数组语法）🚜
意义不大，原始的class即可完成，有时候变量可能需要。
十一、作业
注：点击变色
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<style>
.active{
color:red;
}
</style>
</head>
<body>
<div id='app'>
<ul>
<li :class="{active:isActive==index}" v-on:click="colorChoose(index)" v-for="(item,index) in movies">
{{index}}--------- {{item}}
</li>
</ul>
</div>
<script src='../js/vue.js'></script>
<script>
const app = new Vue({
el:'#app', //用于挂载要管理的元素
data:{ //定义数据
message: '你好啊，李银河！',
movies: ['夏洛特烦恼','大话西游','桃姐','人世间'],
isActive: 0
},
methods:{
colorChoose:function(index){
this.isActive = index;
}
}
})
</script>
</body>
</html>
