Vue框架---基本语法

<template>            <!-- 里面只能有一个根标签 -->
  <div id="app">
     <!-- 1.数据如何渲染页面？表达式{{}} -->
    <p>{{msg}}</p>    <!--绑定变量-->        
    <hr>
    <p>{{stu.name}}-----{{stu.sex}}-----{{stu.age}}</p>     <!--绑定对象的属性-->
    <p>{{stu.name+"-----"+stu.sex}}</p>
    <hr>
    <!--绑定的其他指令-->
    <p v-html="ht"></p>     <!--v-html:指令绑定元素的html  自动解析值里面的标签-->
    <p v-text="ht"></p>      <!--v-text:绑定里面的值，不会自动解析值里面的标签-->
    <hr>
    <!--绑定属性   动态操作元素的属性---v-bind，  简写形式是 ： -->
    <div v-bind:title="title"></div>
    <img v-bind:src="imgsrc">   <!--绑定远程图片-->
    <img :src="localimg">       <!--绑定本地图片-->
    <hr>
    <!--2.Class类名称绑定-->
    <!-- 动态绑定多个class  {class:变量，class：变量} -->
    <div v-bind:class="{a_block:isshow}">绑定一个类名称</div>    <!--isshow:true表示类是否存在-->
    <div :class="isshow?'bgcla':''">绑定类名称的第二种方法</div>
    <div :class="[isclass1,isclass2]">绑定类名称的第三种方法</div>
    <div :class="[isshow?isclass2:'']">绑定类名称的第四种方法，三元运算符</div>
    <div :class="{a_block:isshow,bg2:isshow}">绑定多个类名称</div>
    <hr>
    <!--3. 循环渲染数据(循环多层数据)    v-for 、 v-repeat    -->
    <ul>
      <!--item指集合里的所有内容，key是集合里面唯一的东西，比如索引.    虽然此处只写了一个li，但页面显示时，有多少数据就会出现多少个li-->
      <li v-for="(item,index) in student" :key="index">
          {{item}}
          {{item.name+'-----'+item.age}}
      </li>
    </ul>
    <hr>
      <!-- 多层遍历(循环遍历) -->
    <ul>
        <li v-for="(item,index) in people" :key="index">
            <p>{{item.name}}/{{item.sex}}/{{item.age}}</p>
          <ul>
            <li v-for="(it,key) in item.object" :key="key">
              <p>{{it.name+'---'+it.score}}</p>
            </li>
          </ul>
        </li>
    </ul>
    <hr>
      <!--4.动态绑定style行内样式     、数组绑定、对象绑定-->
      <div :style="{'width':dt_width+'px','height':dt_height+'px'}"></div>      <!--基本绑定方式-->
      <div :style="[text]">11111</div>                 <!--数组绑定方式-->
      <div :style="[iscolor?text:'']">2222</div>
      <hr>
      <!--5.vue数据双向原则  mvvm结构(视图view层影响开发层model，开发层影响视图层)-->
      <p>{{datadouble}}</p>
      <input type="text" :value="datadouble">   <!--数据单向，model影响view层-->
      <input type="text" v-model="datadouble">  <!--数据双向    v-model：绑定表单元素标签的值-->
      <!--6.Vue事件  v-on:事件类型 或 @事件类型-->
      <button v-on:click="getMsg">获取数据</button>
      <button @click="getMsglow">获取数据按钮</button>
      <ul>
        <li v-for="(Item,index) in lists" :key="index" @click="getData(Item)">   <!--getData(index)传索引或对象,不传参时不带()，否则会直接执行方法-->
          {{Item.name+"/"+Item.sex}}
        </li>
      </ul>
      <hr>
      <!-- 7.vue中ref获取dom元素节点 (1.给元素命名ref   2.写代码获取 this.$refs.名字,获取到的是单个的)-->
      <div ref="block"></div>
      <button @click="getDom">获取Dom元素</button>
      <!-- 8.给元素定义自定义属性 -->
      <button data-self="selfr" @click="getAttribute">获取自定义属性</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
     msg:"数据的绑定msg",
     stu:{
       name:"苏大强",
       sex:"男",
       age:"22岁"
     },
     ht:"<b>绑定标签</b>",
     title:"绑定属性",
     imgsrc:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553244290744&di=169f625b8a39e1bcb225af3e60c6f160&imgtype=0&src=http%3A%2F%2Fp8.yokacdn.com%2Fpic%2FYOKA%2F2018-11-13%2FU459P1TS1542112441_83771.jpg",
     localimg:require("./assets/img/1111.jpg"),      /*require请求拿到图片*/
     isshow:true,
     isclass1:"bgcla",
     isclass2:"bg2",
     student:[
       {name:"苏大强",age:55},
       {name:"苏明哲",age:36},
       {name:"苏明成",age:33},
       {name:"苏明玉",age:28}
     ],
     people:[
       {
         name:"苏明玉",
         sex:"女",
         age:28,
         object:[
           {name:"Math",score:"85"},
           {name:"Chinese",score:"92"},
           {name:"English",score:"93"}
         ]
       }
     ],   
     dt_width:100,
     dt_height:100,
     text:{
       color:"red"
     },
     iscolor:true,
     datadouble:"Vue数据双向原则",
     lists:[
       {
         name:"苏明哲",
         sex:"男"
       },
       {
         name:"苏明成",
         sex:"男"
       },
       {
         name:"苏明玉",
         sex:"女"
       }
     ]
    }
  },
  methods:{
    getMsg(){
      console.log(this);   //this--VueComponent
      console.log(this.datadouble);
    },
    getMsglow(e){
      console.log(e);    //e---MouseEvent
      //通过事件对象获取当前操作的dom元素节点
      let ele=e.target;
      console.log(ele);    //拿到button元素--<button></button>
    },
    getData(obj){
      console.log(obj);
    },
    getDom(){
      console.log(this.$refs.block);       //获取dom元素节点
      this.$refs.block.innerHTML="1";
    },
    getAttribute(e){
      let el=e.target;
      let Self=el.getAttribute("data-self");
      console.log(Self);
    }
  }
}
</script>

<style>               /* 当前组件的css脚本 */
.a_block{
  width: 500px;
  height: 20px;
  background-color: plum;
}
.bgcla{
  width: 500px;
  height: 20px;
  background-color: red;
}
.bg2{
  width: 500px;
  height: 20px;
  border: 3px solid darkorange;
}
</style>