web前端框架vue之指令

<script src="js/vue.js"></script>
  <body>
    <div id="app">
      <div>{{msg}}</div> 
      <!-- 输出Hello world vue -->
      <div>{{1+2}}</div>
      <!-- 数字类型的自动相加，输出3 -->
      <div>{{msg+'----'+123}}</div>
      <!-- 字符串拼接，输出Hello world vue----123 -->
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "Hello world vue"
        }
      });
    </script>

vue之Hello world的步骤：
1，需要提供使用的标签
2，引入vue.js文件
3，可以使用vue的语法做功能
4，把vue提供的数据填充到标签中
el是指元素挂载位置(值是css选择器或者dom元素)
data是模型数据
{{msg}}是差值表达式，填充到html里，进行前端渲染
vue代码运行原理，vue代码--->vue框架--->原生js

什么是vue的指令？
自定义属性就是vue的指令。
v-cloak解决“闪动”问题。

<style type="text/css">
    [v-cloak]{
          display:none
       }
    </style>

<div id="app">
      <div v-cloak>{{msg}}</div> 
      <!-- 输出Hello world vue -->
    </div>
    <script>
      /*
       v-cloak指令的用法
       1，提供样式
       [v-cloak]{
          display:none
       }
        2，在差值表达式所在的标签中添加v-cloak指令
        原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果，解决了“闪动”问题
       */
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "Hello world vue"
        }
      });
    </script>

v-text，v-html，v-pre它们的作用和区别是什么？
v-text的作用和差值表达式一样，更简洁一些，不存在“闪动问题”，推荐使用v-text而不推荐使用差值表达式。
v-html的作用是能直接渲染出html的样式，但是很不安全，慎重使用，容易遭到xss跨站脚本攻击；本网站内部数据可以使用，第三方数据不能使用。
v-pre的作用是能渲染出html原始信息，不进行编译。

<div id="app">
      <div>{{msg}}</div> 
      <div v-text='msg'></div>
      <!-- 输出结果是Hello world vue -->
      <div v-html='msg1'></div>
      <!-- 输出h1标签大小的HTML字符串 -->
      <div v-pre>{{msg}}</div>
      <!-- 输出{{msg}} -->
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "Hello world vue",
          msg1:'<h1>HTML</h1>'
        }
      });

什么是vue的数据响应式？什么是vue的数据绑定？
html5中的响应式指屏幕尺寸变化导致样式变化，vue的数据响应式指数据变化导致页面内容变化。

v-once的作用和应用场景是什么？
v-once只编译一次，显示内容后不再具有数据响应式。对于某些不需要修改的数据来说，使用v-once能提高性能，因为不需要监听它的变化。

v-model数据双向绑定的作用和应用场景是什么？
v-model数据双向绑定主要用于input输入框，无论是修改输入框里的内容还是data模型数据里的数据，都会产生变化。代码如下，核心代码是v-model='msg'，绑定了data中的msg

<div id="app">
      <div>{{msg}}</div> 
      <div>
        <input type="text" v-model='msg'>
      </div>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "Hello world vue"
        }
      });

vue事件绑定的基本用法是什么？
使用v-on进行事件绑定，点击按钮使其加1。

 <div id="app">
      <div>{{num}}</div>
      <div>
        <button v-on:click='num++'>点击</button>
        <button @click='handle'>点击2</button>
      </div>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          num: 0
        },
        methods: {
          handle: function () {
            this.num++;
          }
        }
      });
    </script>

当业务量增加的时候，所有的事件处理写在一起效率很低，维护困难，因此可以把事件写在methods里，调用methods里的方法时，直接调用函数名或者直接调用函数。

简单的加法计算器，原理为数据双向绑定和事件绑定
样式部分：

<div id="app">
    <h1>简单计算器</h1>
    <div>
      <span>数值A:</span>
      <span>
        <input type="text" v-model='a'>
      </span>
    </div>
    <div>
      <span>数值B:</span>
      <span>
        <input type="text" v-model='b'>
      </span>
    </div>
    <div>
      <button v-on:click='handle'>计算</button>
    </div>
    <div>
      <span>计算结果:</span>
      <span v-text='result'></span>
    </div>
  </div>

逻辑部分：

var vm = new Vue({
      el: '#app',
      data: {
        a: '',
        b: '',
        result: ''
      },
      methods: {
        handle: function(){
          // 实现计算逻辑
          this.result = parseInt(this.a) + parseInt(this.b);
        }
      }
    });

vue属性绑定，可以动态的修改url属性，默认百度url，点击切换后再点击a标签跳转到淘宝，因为修改了url地址

 <div id="app">
      <a v-bind:href="url">默认百度</a>
      <button v-on:click="handle">切换淘宝</button>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          url:'https://www.baidu.com'
        },
        methods: {
          handle: function(){
            // 修改url地址
            this.url = 'https://www.taobao.com'
          }
        }
      });