1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>模板语法title>
6 <script type="text/javascript" src="../js/vue.js">script>
7 head>
8 <body>
9
18 <div id="root">
19 <h1>插值语法h1>
20 <h3>你好，{{name}}h3>
21 <hr/>
22 <h1>指令语法h1>
23 <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}a>
24 <a :href="school.url" x="hello">点我去{{school.name}}1a>
25 div>
26 body>
27
28 <script type="text/javascript" >
29 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
30 new Vue({
31 el: '#root',
32 data:{
33 name: 'jack',
34 school:{
35 name: '深圳大学',
36 url: 'https://www.baidu.com'
37 }
38 }
39 })
40 script>
41 html>
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>数据绑定title>
6 <script type="text/javascript" src="../js/vue.js">script>
7 head>
8 <body>
9
17 <div id="root">
18 单项数据绑定：<input type="text" v-bind:value="name"><br/>
19 双项数据绑定：<input type="text" v-model:value="name"><br/>
20 双项绑定简写：<input type="text" v-model="name"><br/>
21
22
26 div>
27 body>
28
29 <script type="text/javascript" >
30 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
31 new Vue({
32 el: '#root',
33 data:{
34 name: 'jack'
35 }
36 })
37 script>
38 html>