Vue基础1（vue目录结构，数据、属性绑定，循环（v-for）渲染数据,vue数据双向,vue事件,vue中ref获取dom元素节点）

vue 项目中目录结构

vue的数据绑定 绑定属性 循环渲染数据 数据渲染

<template>
  <div id="app">
    <div>我的第一个vue</div>
    <div>注意下边的代码都是在data对象中取值</div>
    
   
    
    <!--变量的动态绑定-->
    <div>{{a}}</div>
    <div>{{str}}</div>

    
    <!-- 模板字符串取值-->
    <!--对象的绑定-->
     <!-- 数据的循环渲染---v-for---循环哪个元素给哪个元素写 指令-->   
    <div>{{`我的成名曲是：${song.big}`}}</div>

	<!--在使用v-for时添加key属性   保持唯一性-->
    <div v-for = "(item,index) in student" :key="index">
      {{'全民制作人们大家好，我是'+item.introduction+item.name+',喜欢'}}
      <span v-for = "(rabbit,k) in item.hobby" :key="k">
          {{rabbit.h}}
      </span>
      <br>
      {{item.last}}
    </div>

	<div> Vue  绑定属性  绑定Class   绑定Style</div>
    <!-- v-bind   可以简写为：属性   等价 -->
   <div v-bind:titlle="title"></div>
    <div :titlle="title"></div>
    
    <div v-bind:html="title"></div>//错误写法，绑定html值不这样
    <div v-html="htmlinfo"></div>
    <div v-text="title"></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':`${w}px`,'height':'100px'}"></div>


	<div>vue数据双向   vue事件   vue中ref获取dom元素节点  MVVM</div>
   <!-- //v-model  表单元素的使用指令  数据双向    后台数据变化 前台自动变化  前台变化后台自动修改 -->
   <!-- MVVM 结构   MV 指model数据改变影响view    VM指view数据改变影响model -->
   <br>
   <input type="text" @change="changeMsg()" @keypress="keyData()" v-model="test">
  <!-- //vue里面的事件绑定   @click=""  v-on:click="" -->
  <button v-on:click="setMsg()">设置值</button>
  <button @click="getMsg()">读取值</button>

  <!-- 获取dom元素  ref -->
  <div id="block" ref="domlist">1</div>
   <div ref="domlist">2</div>
  <button @click="getlist()">获取dom元素</button>
 
  </div>
</template>

<script>
// require imgUrl from "../assets/test.png";
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  data() {
    return {
      a:1,     
      str:"鸡你太美",
      song:{
        big:"鸡你太美"
      },
      student:[
      {
        name:"菜虚坤",
        song:"鸡你太美",
        sex:"女",
        introduction:"练习时长两年半的个人练习生",
        last:"在今后的节目中我还准备了很多我自己作词作曲编舞的原创作品，期待的话请多多喂我吃饭吧",
        hobby:[
          {h:"唱"},
          {h:"跳"},
          {h:"rap"},
          {h:"music"}
        ]
      }
      ],
      red:"read",
      htmlinfo:"<span>123</span>",
      title:"标题",
      imgUrl:"",
      domvalue:"鸡你太美"
    } 
  },
  created(){
        let urlTemp = "assets/15.jpg";
        this.imgUrl = require("@/"+urlTemp)
  },
  methods:{
    set(){
      this.test = "蔡旭坤驾到";
      console.log(this.test);
    },
    got(){
      console.log(this.test);
    }
  }, 
  methods:{
     //事件执行方法在这
     setMsg(){
       this.test="我修改了";
        console.log('====================================');
        console.log(this);
        console.log('====================================');
     },
     getMsg(){
       console.log('====================================');
       console.log(this.test);
       console.log('====================================');
     },
     changeMsg(){
       console.log('====================================');
       console.log(this.test);
       console.log('====================================');
     },
     keyData(){
       console.log('====================================');
       console.log(this.test);
       console.log('====================================');
     },
     getlist(){
        console.log('====================================');
        console.log(this.$refs.domlist.innerHTML);
        console.log('====================================');
        console.log(document.getElementById("block"));
     }
    }
      
    }
    </script>

tips:代码中用到了一个vue导入图片的方法
在导入组件之前声明一个require
require imgUrl from “…/assets/test.png”;
然后在写一个方法调用：
created(){
let urlTemp = “assets/15.jpg”;
this.imgUrl = require("@/"+urlTemp)
},