码迷,mamicode.com
首页 > 其他好文 > 详细

【Vue-入门-1】

时间:2019-12-11 19:20:34      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:template   roo   直接   code   重新定义   src   表达式   v-model   --   

 1 <!DOCTYPE HTML>
 2 <html lang="zh">
 3 <head>
 4         <meta charset="utf-8" />
 5         <title>Vue</title>
 6         <script src="../../vue.js"></script>
 7 </head>
 8 <body>
 9             <!-- --------------------------------------Mr丶L----------------------------------------------- -->
10             <div id="root" v-bind:title="title + new Date().getHours() + ‘:‘ + new Date().getMinutes()">
11             <!-- v-bind 简写模式   ps:(其实就是不写) -->
12             <!-- <div id="root" :title="title + new Date().getHours() + ‘:‘ + new Date().getMinutes()"> -->
13             <!-- 模板 -->
14             <!-- 插值表达式 -->
15             <h1>联系方式:{{msg}}</h1>
16             <!-- <h2>{{number}}</h2> -->
17             <!-- --------------------------------------Mr丶L----------------------------------------------- -->
18             <!-- 直接输出 -->
19             <h2 v-text="content"></h2>
20             <!-- 转义输出 -->
21             <h2 v-html="content"></h2>
22             <div v-on:click="tankuang">{{msg}}</div>
23             <!-- 以下是 v-on: 的简写形式 -->
24             <!-- <div @click="tankuang">{{msg}}</div> -->
25             <!-- --------------------------------------Mr丶L----------------------------------------------- -->
26             <!-- v-value 简写 与 v-model 区别 -->
27             <input :value="T1" />
28             <!-- 数据双向绑定 -->
29             <input v-model="T1" />
30             
31             <div>{{T1}}</div>
32             <!-- --------------------------------------Mr丶L----------------------------------------------- -->
33         </div>
34     
35     <script>
36         new Vue({
37             el:"#root",                                        //挂载点
38             //template:‘<h1>Hello {{msg}}</h1>‘,            //实例
39             data:{                                            //数据
40                 msg:"18864645210",
41                 number:123,
42                 content:"<h1>hello</h1>",
43                 title:"当前时间:",
44                 T1: "kiss -kis kis"
45             },
46             methods:{
47                 tankuang:function(){
48                     alert(741741)
49                     this.msg="777777777"                    //重新定义data数据 注意! 所有用到此数据的元素都会发生变化
50                 }
51             }
52         })
53         
54     </script>
55 
56 </body>
57 </html>

【Vue-入门-1】

标签:template   roo   直接   code   重新定义   src   表达式   v-model   --   

原文地址:https://www.cnblogs.com/xiaoluohao/p/12024270.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!