Vue基础

Vue基础

用vue写第一个hello world

  • 准备一个装载数据的容器
        <div id = "app">{{message}}</div>  <!-- 插值语法:{{}} 可以读取到在data的所有属性 -->
    
  • 创建Vue实列 (一个vue实例只能接管一个容器)
        var app = new Vue({el:"#app",  // 用于指定当前vue实例为哪个容器使用,值为css选择器字符串data:{      // 用于储存数据,数据供el指定的容器使用message:'Hello world' }});// data中数据发生变化,那么在容器用到的数据会自动更新
    

模板语法

  • 插值语法
    • 特点: 用在标签体内容
    • 写法
      {{xxx}}  // 可以拿到data里所有的属性
      
    • 指令语法
    • 特点: 用在标签的解析(标签属性,标签体内容,绑定事件等)
    • 写法
         // 解析标签属性:v-bindv-bind:href='url':href='url' // 简写模式