web前端框架vue之指令

  
    

      
{{msg}}
 
      
      
{{1+2}}
      
      
{{msg+'----'+123}}
      
    
    

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解决“闪动”问题。

      
{{msg}}
 
      
    
    

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

      
{{msg}}
 
      

      
      

      
      
{{msg}}
      
    
    

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

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

    
简单计算器
    

      数值A:
      
        
      
    
    

      数值B:
      
        
      
    
    

      计算
    
    

      计算结果:
      
    
  

逻辑部分：

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地址

 

      默认百度
      切换淘宝