-
Notifications
You must be signed in to change notification settings - Fork 0
/
初始vue.html
54 lines (50 loc) · 1.95 KB
/
初始vue.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>初始vue</title>
<script type="text/javascript" src = "./js/vue.js"></script>
</head>
<body>
<!-- 容器和实例要一一对应 -->
<!-- 准备好一个容器 -->
<div class="root">
<h1>你好 , {{name}}, 地址： {{address}} ,</n> {{Date.now()}}</h1>
<hr/>
<h1>指令语法</h1>
<a v-bind:href="url">点我去学习</a>
<!-- v-bind 可以简写为： -->
<a :href="url">点我去学习</a>
</div>
<!--
模板语法两大类：
1.插值语法：
功能： 用于解析标签体内容
写法： {{xxx}}， xxx 是js表达式
2.指令语法：
功能： 用于解析标签
举例： v-bind:href="xxx" or 简写为 :href="xxx" xxx同样要简写为js表达式
-->
<!--
vue中有2中数据绑定的方式
1.单向绑定： v-bind 数据只能从data流向页面
2.双向绑定 v-model 数据不仅能从data流向页面，还可以从页面流向data
双向绑定一般都应用在表单类元素上 input select 等
v-model : vule 可以写为 v-model, 因为v-model 默认收集的就是value值
-->
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
//创建vue实例
new Vue({
// # ID择器 . class选择器
el: '.root',//or document.getElementById('root') el 用于指定当前vue实例为那个容器服务，值统称为css选择器字符串
data: {
// data 中用于存储数据， 数据供el所使用的容器使用 通过类选择器 或者 id选择器
name:'张三123aaa',
address:"北京",
url:"https://www.baidu.com/"
}
})
</script>
</body>
</html>