Vue1.模板语法
2021-10-29 本文已影响0人
黑咔
html 中包含了一些 JS 语法代码，语法分为两种，分别为：
- 插值语法（双大括号表达式）
- 指令（以 v-开头）
1.插值语法
- 功能: 用于解析标签体内容
- 语法: {{xxx}} ，xxx 会作为 js 表达式解析
2.指令语法
- 功能: 解析标签属性、解析标签体内容、绑定事件
- 举例：v-bind:href = 'xxxx' ，xxxx 会作为 js 表达式被解析
- 说明：Vue 中有很多的指令，此处只是用 v-bind 举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板语法</title>
<!--引入vue-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h1>插值语法</h1>
<h3>Hello,{{name}}</h3>
<h1>指令语法</h1>
<a v-bind:href="url.toUpperCase()" v-bind:week="week.Saturday">{{week.name}}一下</a>
<a :href="url" :week="Saturday">{{week.name}}一下2</a>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
//创建Vue实例
new Vue({
el: '#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data: { //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
name: 'world',
url: 'https://www.baidu.com',
week: {
Saturday: '星期六',
name: '百度'
}
}
})
</script>
</html>
