基本语法

        new Vue({
              el:'XX'  // css的选择器。 意思就是管理这个标签内部的所有内容。
              data:{
                  msg:'hellow world'//   模型 ，给el选择出来的内容提供数据
        }

 })

vue的一些内置指令
指令：是特殊的带有前缀v-的特征
扩展了 html原有标签属性功能
v-text： 把模型当中的内容当做文字展示到页面当中
v-html: 把模型当中的内容当做普通html插入
v-show: 根据表达式的值来 显示或隐藏html元素 display:none
v-if: 根据表达式的值在dom中生成或者移除一个元素
v-else: 就是javascript中else的意思，必须跟着v-if或v-show,充当else的功能
v- for : 基于原收据重复渲染元素，遍历，迭代
v-model:数据双向绑定
v-pre：跳转编译，不去解析里面的内容
v-clock: 防止闪烁
数据放在data里面

vue绑定事件

事件放在methods里

//html

   <button @click='fn()'>点击按钮<button>
          //小括号可以不用写

// js

     var vue = new Vue({
             el:'.box',
       data:{
         msg:'XXX’
        },
       methods:{
         fn:function(){
             alert('hellow world')
           }
      }
 })  

//阻止事件的默认行为和阻止事件冒泡

methods：{
  show:function(e){
   e.cancelBubble = true;
   e.preventDefault();
   }
}

vue的钩子函数

Paste_Image.png

Paste_Image.png