vue模板语法
1.在vue文件夹根目录下新建一个文件夹02vue模板语法，并在内新建html文件。引入本地vue.js，设置好基本内容框架。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板语法</title>
<!--引入vue-->
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成使用生产版本提示。
</script>
</html>
2.插值语法与指令语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板语法</title>
<!--引入vue-->
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<hr>
<h1>指令语法</h1>
<!--v-bind绑定指令，vue的语法有特点，一般以v-开头-->
<!--把url的内容绑定给href,把url的内容当成js表达式执行-->
<a v-bind:href="url">点我去hao123</a>
<!--v-bind可以简写为：-->
<a :href="url1">点我去百度</a>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成使用生产版本提示。
new Vue({
el: '#root',
data: {
name: 'jack',
url: 'https://www.hao123.com',
url1:'https://www.baidu.com'
}
})
</script>
</html>
3.开发的时候可能出现多级结构。进行插值语法时需要进行逐级寻找，如此处的school内还有一级school1和school2。最后网页的图如下图所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板语法</title>
<!--引入vue-->
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<hr>
<h1>指令语法</h1>
<!--v-bind绑定指令，vue的语法有特点，一般以v-开头-->
<!--把url的内容绑定给href,把url的内容当成js表达式执行-->
<a v-bind:href="url">点我去hao123</a>
<!--v-bind可以简写为：-->
<a :href="url1">点我去百度</a>
<hr>
<!--hr是画一条分割线的意思-->
<!--多级结构，用.来进行逐级深入-->
<h1>{{school.school1}},{{school.school2}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成使用生产版本提示。
new Vue({
el: '#root',
data: {
name: 'jack',
url: 'https://www.hao123.com',
url1: 'https://www.baidu.com',
school: {
school1: '小白',
school2: '小黑',
}
}
})
</script>
</html>
总结
Vue模板语法有2大类:
1.插值语法:
功能:用于解析标签体内容。
写法: {{xxx}}, xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)。
举例: v-bind:href="xx"或简写为 ：href=“xx”, xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注: Vue中有很名的指令，且形式都是: v-??? 此处我们只是拿v- bind举个例子。