vue 项目中目录结构 数据绑定 绑定属性 循环渲染数据 数据渲染、绑定属性 绑定Class 绑定Style、vue数据双向 vue事件 vue中ref获取dom元素节点 M

1. vue 项目中目录结构   数据绑定  绑定属性  循环渲染数据  数据渲染
2.  Vue  绑定属性  绑定Class   绑定Style

3. vue数据双向   vue事件   vue中ref获取dom元素节点  MVVM

<template>
  <div id="app">
    <!-- 变量绑定 -->
    <div>{{a}}</div>
    <div>{{b[1]}}</div>
    <div>{{str}}</div>
    <div>{{obj}}</div>
    <div>{{`我的名字叫：${obj.name}`}}</div>  <!-- 模板字符串取值`${}` -->
    <div>{{obj.sex}}</div>
    <br>
    <div>{{student}}</div>
    <!-- 数据的循环渲染 -->
    <ul>
      <li v-for="(item,index) in student" :key="index">{{item.name+"/"+index}}</li>  
      <!-- key 相当于每个标签是唯一的，itme 当前子集的对象  index当前对象的索引 -->
    </ul>
    <br>
    <!-- 多层渲染  嵌套 -->
    <div>{{student}}</div>
    <ul>
      <li v-for="(item,index) in student" :key="index">
        {{item.name+"爱好是："}}
        <ul>
          <li v-for="(hot,k) in item.hobby" :key="k">{{hot.h}}</li>
        </ul>
      </li>
    </ul>
    ---------------------
    <div>vue  绑定属性  绑定class 绑定style  </div>
    -------------------
    <!-- v-bind  简写属性   也可省略v-bind  直接:title          -->
    <div v-bind:title="title"></div>
    <div :title="title"></div>
     <!-- 绑定HTML值 -->
    <div v-html="title"></div> 
    <div v-text="showinfor"></div> 

    <!-- 常规绑定,直接绑定class -->
    <div class="block"></div>  
    <!-- 动态添加类 -->
    <div :class="addClass"></div>
    <!-- 多个类添加,通过多个变量添加 -->
    <div :class="{'block':true,'bor':true}"></div>
    <!-- 直接绑定多个 -->
    <div :class="['block','bor']"></div>
    <!-- css样式添加 -->
    <div :style="{'width':'200px','height':'200px','backgroundColor':'black'}"></div>
    <!-- 上面的值也可以动态绑定,如下 -->
    <div :style="{'width':`${w}`,'height':'200px','backgroundColor':'red'}"></div>
    
    ---------------------
    <br>
     <!-- vue 数据双向   vue事件  vue中ref获取dom元素节点 MVVM  MV指model数据改变影响view   VM指view数据改变影响model -->
     <!-- v-model  表单元素的使用指令 数据双向绑定 后天数据变化，前台数据自动变化   前台数据变化，后台自动修改数据 -->
     <input type="text" @change="changeMsg()"   v-model="test">
     <!-- vue 里边的事件绑定有2中写法    @click=""  v-on:click="" -->
     <button v-on:click="setMsg()">设置值</button>  <!-- 点设置值按钮，数据由原来的请输入...变更为  我修该数据了 -->
     <button v-on:click="getMsg()">读取值</button>

     <!-- vue中ref获取dom元素节点 -->
      <div id="blockl" ref="blocklist">111</div>  <!-- ref  相当于id名称 -->
      <div ref="blocklist">2222</div>   <!--如果写多个，依然只拿到最后一个，后边把前边的覆盖了 -->
      <button @click="getdomMsg()">获取dom</button>
  </div>  
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
     a:1,
     b:[1,2,3,4,5],
     str:"可爱",
     obj:{
       name:"张三",
       sex:"男"
     },
     student:[
       {
         name:"小明",
         sex:"男",
        hobby:[
          {
            h:"篮球" 
           },
           {
            h:"足球" 
           },
           {
             h:"排球"
           }
        ]    
       },
       {
         name:"小花",
         sex:"女",
         hobby:[
          {
            h:"篮球" 
           },
           {
            h:"足球" 
           },
           {
             h:"排球"
           }
        ]    
       },
       {
         name:"李毅",
         sex:"男",
         hobby:[
          {
            h:"篮球" 
           },
           {
            h:"足球" 
           },
           {
             h:"排球"
           }
        ]    
       }
     ],
     title:"标题",
     showinfor:"<span>12345</span>",
     addClass:"block",
     w:"200px",
     test:"请输入...",
  }
 },
//  事件方法
  methods:{
    setMsg(){
        this.test="我修改数据了"    //this指当前组件
    },
    getMsg(){
      console.log(this.test);   //输出上边修改的数据    我修改数据了
    },
    changeMsg(){
      console.log(this.test);
    },
    getdomMsg(){
      console.log(this.$refs.blocklist);
      console.log(document.getElementById("blockl"));
      
      
    }

  }
}
</script>

<style lang='scss'>
.block{
  width:100px;
  height:100px;
  border:1px solid silver;
}
.bor{
  background-color: yellow;
}
</style>