vue的基本指令

Vue之 - 基本的代码结构和插值表达式、v-cloak

使用 v-cloak 能够解决 插值表达式闪烁的问题

页面初始化时，html会出现短暂的 {{}}，再加载页面。

原因：html页面加载时先构建dom，再加载vue。在vue初始化完成前，dom将{{}}代码解析为文本，在vue初始化后 才会把{{}}解析成vue的语法，此时列表渲染会有短暂的一闪的情况。

除了用v-cloak解决，还可以使用template标签将需要渲染的 html 包起来。

 <p v-cloak>++++++++ {{ msg }} ----------</p>

Vue指令之v-text和v-html 默认 v-text 是没有闪烁问题的v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空，不会解析标签v-html会覆盖元素中原本的内容，会解析标签。它会先移除节点下的所有节点，调用HTML方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值。 Vue指令之v-bind的三种用法

直接使用指令v-bind，v-bind: 是 Vue中，提供的用于绑定属性的指令

使用简化指令:

v-bind 中，可以写合法的JS表达式

在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"

<div id="app">
    <p>{{msg}}</p>
    <p v-cloak>++++++++ {{ msg }} ----------</p>
    <h4 v-text="msg">==================</h4>

    <div>{{msg2}}</div>
    <div v-text="msg2"></div>
    <div v-html="msg2">1212112</div>

     <input type="button" value="按钮" v-bind:title="mytitle + '123'"> 
    <!-- Vue 中提供了 v-on: 事件绑定机制 可以简写成@-->
     <input type="button" value="按钮1" :title="mytitle + '123'" v-on:click="alert('hello')"> 
    <input type="button" value="按钮2" @click="show">
  </div>

  <script src="./lib/vue-2.4.0.js"></script>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123',
        msg2: '哈哈，我是一个大大的H1， 我大，我骄傲',
        mytitle: '这是一个自己定义的title'
      },
      methods: {
        show: function () {
          alert('Hello')
        }
      }
    })
  </script>

效果：

Vue指令之v-on和跑马灯 跑马灯效果

补充知识：

javascript中的substring(from,to)方法：

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

substring() 方法返回的子串包括 开始 处的字符，但不包括 结束 处的字符。

from是必须的，是一个非负的整数，规定要提取的子串的第一个字符在 string Object 中的位置。

to是可选的。一个非负的整数，比要提取的子串的最后一个字符在 string Object 中的位置多 1。
如果省略该参数，那么返回的子串会一直到字符串的结尾。

var str=“string Object”;
document.write(str.substring(4));//ng Object
document.write(str.substring(3,8));//ng Ob HTML结构：

<div id="app">

    <p>{{info}}</p>

    <input type="button" value="开启" v-on:click="go">

    <input type="button" value="停止" v-on:click="stop">

  </div>

Vue实例：

	// 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        info: '浪起来~！',
        intervalId: null
      },

      methods: {
        go() {
          // 如果当前有定时器在运行，则直接return
          if (this.intervalId != null) {
            return;
          }

          // 开始定时器
          this.intervalId = setInterval(() => {
			//截取第一个字符放到最后var start=this.info.substring(1),var 					  end=this.info.substring(0, 1);
            this.info = this.info.substring(1) + this.info.substring(0, 1);
          }, 500);
        },
        stop() {
          clearInterval(this.intervalId);

        }

      }

    });

Vue指令之v-on的缩写和事件修饰符 指令v-on v-on:事件绑定机制可简写成：@ 事件修饰符：

.stop 阻止冒泡

.prevent 阻止默认事件

.capture 添加事件侦听器时使用事件捕获模式

.self 只当事件在该元素本身（比如不是子元素）触发时触发回调

.once 事件只触发一次

1、html结构

.stop阻止冒泡，正常情况，点击按钮，事件从里向外触发，先输出按钮，然后inner盒子，再到outer盒子，添加.stop事件后，点击按钮，只执行按钮的事件处理，阻止冒泡行为

<!--.stop阻止冒泡行为-->
<div class="outer" @click="outHanddle" id="app">
      <div class="inner" @click="innerHanddle">
        <input type="button" value="戳他" @click.stop="btnHanddle">
      </div>
    </div>

.capture，正常情况，点击按钮，事件从里向外触发，先触发按钮，再触发inner盒子，添加.capture事件后，点击按钮，触发捕获事件，从外向里捕获，先触发inner盒子，再触发按钮.

<!--capture,从外向里捕获-->
<div class="inner" id="app" @click.capture="outHanddle">
    <div class="div2" @click="innerHanddle">
        <input type="button" value="戳我" @click="btnHanddle">
    </div>
</div>

.prevent阻止默认行为,正常情况，点击1链接跳转会另起一页，添加.prevent后，点击链接在本页跳转

 <!--使用 .prevent 阻止默认行为-->
      <a href="http://www.baidu.com" @click.prevent="linkHanddle">不要找我，找百度</a>

.self,只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为,

<div class="outer" @click="outHanddle">
       <div class="inner" @click.self="innerHanddle">
         <input type="button" value="戳他" @click="btnHanddle">
       </div>
     </div>
     ```

5. .once 只触发一次事件处理函数，点击链接触发linkHanddle事件，再点击链接就跳转到href的地址
javascript 有问题，先去百度
2、 Vue实例：

<script>
    var vm=new Vue({
        el:'#app',
        data:{},
        methods:{
            outHanddle: function () {
                console.log("out被你点击了=========");
            },
            innerHanddle: function () {
                console.log("inner被你点击了---------------");
            },
            btnHanddle: function () {
                console.log("btn被你点击了。。。。。。。。。。。。。。");
            },
            linkHanddle:function(){
                console.log("link被你戳了。。。。。");
            }
        }
    })
</script>

Vue指令之v-model和双向数据绑定

v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定

使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定

注意： v-model 只能运用在 表单元素中

<body>
<div id="app">
    <h1>{{msg}}</h1>
    <!--<input type="text" style="width: 100%" v-bind:value="msg">-->
    <input type="text" style="width: 100%" v-model="msg">
</div>

<script src="lib/vue-2.4.0.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'我爱学习，我爱劳动，我爱思考，我爱反思'
        }
    })
</script>
</body>

效果图：