效果；

初始vue模板语法的2大类例子4（一看就懂）_插值

 

 

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <!-- 开发环境版本，包含了有帮助的命令行警告 type="text/javascript" -->
 9     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
10 </head>
11 
12 <body>
13 
14 
15     <!-- 
16 
17   vue模板语法有2大类
18    1 插值语法
19    功能：用于解析标签体内容。
20    写法： {{需要的内容}}
21 
22    2 指令语法
23     功能： 用于解析标签（包括 标签属性 标签体内容 绑定事件...)
24 
25  备注 ：vue中有很多的指令，并且形式都是  v-???? 此处我们只是拿v-bind 举个例子。 
26 
27      -->
28 
29     <!-- 符合一部分的HTML语法。  -->
30     <div id="root">
31 
32         <h1> 插值语法 </h1>
33         <h1>hello.{{ name }}</h1>
34         <hr>
35         <h1>指令语法</h1>
36         <!-- 链接方式写入。v-bind. 这里双引号里面，是一个表达式。
37         
38         1 用v-bind可以修改URL地址。 不用这个，就是写死的了。 不能修改。
39         -->
40         <a v-bind:href="url"> 点我去学习vue 官网</a>
41 
42     </div>
43 
44 
45     <!-- JavaScript代码  -->
46     <script type="text/javascript">
47         Vue.config.productionTip = false // 阻止vue在启动时 生产生产提示。
48         //创建vue实例。实例就是实际的例子。犹如举例说明 。el就是 element的缩写。 
49         new Vue({ //注意大写V 
50             el: '#root', // el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
51             data: {
52                 name: 'Jack',
53                 url: 'https://cn.vuejs.org/v2/api/#v-bind'
54 
55 
56             }
57 
58 
59 
60         })
61 
62 
63 
64 
65     </script>
66 
67 </body>
68 
69 </html>