VUE学习—day1

<div>{{msg}}</div>

插值表达式
将数据直接填充到html标签中,
支持基本的计算操作

var vm=new Vue({
    el:'#app',//元素的挂载位置（值可以是css选择器或者dom元素）
    data:{//模型数据（值是一个对象）
        msg:'hello vue'
    }
});

el:’#app’,//元素的挂载位置（值可以是css选择器或者dom元素）
data:{//模型数据（值是一个对象）

指令自定义属性格式

v-cloak
v-cloak“闪动”：先出现{{msg}}，再替换为hello vue；
先通过样式隐藏内容，然后在内存中进行值的替换，替换好后再显示最终的结果。

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

</style> <div v-cloak>{{msg}}</div>

V-text 填充纯文本
比插值表达式简单

<div v-text="msg"></div>

v-html
填充html片段存在安全问题（跨站脚本攻击）
本网站内部数据可以使用，
来自第三方数据不可用

var vm=new Vue({
   el:'#app',
   data:{
       msg:'hello vue',
       msg1:'<h1>HTML</h1>'
   }
});
<div v-html="msg1"></div>

v-pre
填充原始信息显示原始信息，跳过编译过程

<div v-pre>{{msg}}</div> 

数据响应式（数据的变化导致页面内容的变化）

数据填充：将数据填充到标签中
v-once：只编译一次，显示内容后不再具有响应式功能。
可以提高性能

双向数据绑定：

v-model

<input type="text" v-model="msg">

** MVVM设计思想**
①　M(model)
②　V(view)
③　VM(view-model)事件绑定

v-on<button  v-on:click="num++"> 点击</button>
<button  @click="num++"> 点击</button>