<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>独秀不爱秀</title> </head> <body> <div id="app"> <p>{{ msg }}</p> </div> <!-- 1.导入 vue 的包 --> <script src="./vue/vue-2.4.0.js"></script> <script type="text/javascript"> // 2.创建一个 vue 的实例 let vm = new vue({ el: '#app', // 表示:当前我们 new 的这个 vue 实例,要控制页面上的哪个区域 data: { // data 属性中,存放的是 el 中要用的数据 msg: '欢迎学习vue' // 通过 vue 提供的指令,很方便的就能把数据渲染到页面上,程序猿不在手动操作dom元素了 } }); </script> </body> </html>
在上面这个例子中, div#app 这个元素区域就是 mvvm 中的 v(html结构)、我们 new 出来的 vm 就是 mvvm 中的 vm(调度者), data 就是 mvvm 中的 m(提供页面中需要的数据)。
<p v-cloak>{{ msg }}</p>
同时在 css 文件中添加:
[v-cloak] { display: none; }
<h1 v-text="msg">==========</h1>
这样的话,vue实例中 msg 中的内容就会替换掉 ===========
<div v-html="msg2">123456</div>
<input type="button" value="按钮" v-bind:title="mytitle + '123'">
简写:
<input type="button" value="按钮" :title="mytitle + '123'">
<button type="button" v-on:click="show">点击</button>
简写:
<button type="button" @mouseover="show">鼠标进入</button>
<div class="inner" @click="divhandle"> <button @click.stop="btnhandle">戳他</button> </div>
<a href="http://www.baidu.com" @click.prevent="gobaidu">有问题,问度娘</a>
<div class="inner" @click.capture="divhandle"> <button @click="btnhandle">戳他</button> </div>
<div class="inner" @click.self="divhandle"> <button @click="btnhandle">戳他</button> </div>
<a href="http://www.baidu.com" @click.prevent.once="gobaidu">有问题,问度娘</a>
如对本文有疑问, 点击进行留言回复!!
androidx+viewpage+tablayout+json开发(加载图片和视频)
网友评论