- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- </head>
- <style>
- <!-- v-cloak 能解决插件表达式闪烁问题 -->
- [v-cloak]{ display: none; }
- </style>
- <body>
- <div id="app">
- <!-- v-text 默认没有闪烁问题 -->
- <!-- v-text 会覆盖元素中原本的内容, 但是 插值表达式 只会替换自己的这个占位符, 不会把 整个元素的内容清空 -->
- <div v-text="msg1">
- </div>
- <!-- v-bind 属性绑定, 缩写为 :-->
- <input type="button" value="点击" :title="mytitle +'123'" @click="begin"
- />
- <!-- v-on 事件绑定, 缩写为 @ -->
- <input type="button" value="停止" :title="mytitle1 +'123'" @click="stop"
- />
- <!-- {{ msg}} 后可以加入定值直接显示在页面上, 这是 插值表达式的好处, 如果用 v-text 则无法显示 今天天气好晴朗,
- 因为会被覆盖掉 -->
- <p v-cloak>
- {{ msg }} 今天天气好晴朗
- </p>
- <!-- 可以直接输出 html 格式 -->
- <div v-HTML="msg2">
- </div>
- </div>
- </body>
- </HTML>
- <script src="../js/vue.js"></script>
- <script>
- var vm = new vue({
- el: '#app',
- data: {
- msg1: 'hahaha',
- msg: '123456,789',
- msg2: '<h1 > 我是一个 h1</h1>',
- mytitle: '请点击',
- mytitle1: '点击停止',
- intervalId: null // 在 data 上定义 定时器 Id
- },
- methods: {
- begin(){
- console.log(this.msg)
- if (this.intervalId != null) return;
- // 获取第一个字符 this
- this.intervalId = setInterval( () => {
- var start = this.msg.substring(0,1)
- // 获取到 后面的字符
- var end = this.msg.substring(1)
- // 重新拼接得到新的字符串
- this.msg = end + start
- }, 400)
- },
- stop(){ // 停止计时器
- clearInterval(this.intervalId);
- // 每当清除了定时器之后, 需要把 intervalId 置为 null
- this.intervalId = null;
- }
- },
- })
- </script>
- <!-- 1. 如何定义一个基本的 Vue 代码结构 -->
- <!-- 2. 插值表达式 和 v-text -->
- <!-- 3. v-cloak -->
- <!-- 4. v-html -->
- <!-- 5. v-bind Vue 提供的属性绑定机制 缩写是 : -->
- <!-- 6. v-on Vue 提供的事件绑定机制 缩写是 @ -->
来源: http://www.bubuko.com/infodetail-3086322.html