vue基础语法

vue-数据绑定

<template>
    <!-- 
    数据绑定 {{}} 绑定表达式 表达式里面可以进行运算
    -->
 <div class="container">
   {{message}}
   {{arr}}
  <!-- 绑定变量的指令  v-text 绑定为元素的文本值 -->
   <div v-text="innerText"></div>
   <!-- 绑定变量的指令  v-html  绑定元素的html内容  解析里面的标签 -->
   <div v-html="innerHtml"></div>
 </div>
</template>
// 当前模板的js
// name  指当前组件的名称
//data 函数里面带返回值   当前组件的数据源
<script>
export default {
  name:"container",
 data() {
  return {
    message:"我是vue",
    arr:[1,2,3,4],
    innerText: "我是文本",
    innerHtml: "<b>我是加粗的</b>",
  }
 }
}
</script>

vue-属性绑定

<template>
    <!-- 
    绑定属性 使用的指令是  v-bind 指令  方式：v-bind:title="变量" 
    也可以简写：:class="变量"
    -->
 <div class="container">
   <button v-bind:title="title">按钮</button>
   <button :title="title">按钮</button>
   <div :class="banner"></div>
   <!-- 绑定多个类名称   里面使用{}-->
   <div :class="{'add':true,'addcolor':isadd,'removecolor':!isadd}"></div>
   <div :class="{'add':true,'addcolor':!isadd,'removecolor':isadd}"></div>
   <div :style="{'border':'solid 1px #000','width':'100px','height':'100px'}"></div>
 </div>
</template>
// 当前模板的js
// name  指当前组件的名称
//data 函数里面带返回值   当前组件的数据源
<script>
export default {
 name:"container",
 data() {
  return {
    title:"我是按钮",
    banner:"banner",
    isadd:true,
  }
 }
}
</script>
<style>
.banner{
  width:100px;
  height: 100px;
  border:solid 1px red;
}
.add{
  width: 100px;
  height: 100px;
  border: solid 1px #000;
}
.addcolor{
  background-color: blue;
}
.removecolor{
  background-color: red;
}
</style>

vue-循环渲染数据

<template>
    <!-- 循环渲染数组类型的数据  v-for 指令循环那个元素给谁写
    item 当前的遍历值
    index 当前值的索引
    :key  绑定唯一键
    -->
 <div class="container">
   <ul>
     <li v-for="(value,index) in person" :key="index">
       <b>编号：{{index}}</b>
       <b>姓名：{{value.name}}</b>
       <b>年龄：{{value.age}}</b>
       <b>姓名：{{value.sex}}</b>
    </li>
   </ul>
 </div>
</template>
// 当前模板的js
// name  指当前组件的名称
//data 函数里面带返回值   当前组件的数据源
<script>
export default {
  name:"container",
 data() {
  return {
     person:[
      {
        name:"Lucy",
        age:"15",
        sex:"male"
      },
       {
        name:"Linda",
        age:"15",
        sex:"female"
      },
       {
        name:"Bob",
        age:"15",
        sex:"male"
      }
  }
 }
}
</script>

vue-事件绑定

<template>
<!-- 事件
	vue事件  绑定事件的指令  v-on:type="方法"  简写  @type="方法"; 
    事件的修饰符  在事件之后写
    @click.stop=""  这个是阻止事件冒泡  等于  event.stopPropagation()
    @click.prevent=""  这个是阻止事件的默认行为  等于event.preventDefault()
    @click.self="";  点击自身的时候触发事件  e.target===e.currentTarget
    @click.once=""; 让事件触发一次
    @click.passive="" 事件永远不调用默认行为
    @click.capture="" 事件的捕获   
    -->
 <div class="container">
   <button v-on:click="clickbtn1">按钮1</button>
   <button @click="clickbtn2">按钮2</button>
    <div class="menu" @click.prevent="pipeclick">
      <button @click.stop="pipeclick">冒泡</button>
    </div>
    <!-- 事件里面的this 指针问题 -->
    <button @click="getThis">事件里面的this</button>
    <!-- 事件的执行参数 event-->
    <button @click="getEvent">事件的event</button>
    <!-- 事件的委托 -->
    <ul @click="navmethod">
      <li>我是第一个li</li>
      <li>我是第二个li</li>
      <li>我是第三个li</li>
    </ul>
    <!-- 修饰符 self   触发自身的事件的时候 才会执行-->
    <ul>
      <li @click.self="fun">
        <span>我是里面的li</span>
      </li>
    </ul>
    <!-- 事件的捕获 -->
    <div class="b1" @click.capture="funmeth(1)">
      <div class="b2" @click.capture="funmeth(2)">
        <div class="b3" @click.capture="funmeth(3)"></div>
      </div>
    </div>
    <!-- once 修饰符 试一次性事件 -->
    <button @click.once="getchange">once</button>
 </div>
</template>
// 当前模板的js
// name  指当前组件的名称
//data 函数里面带返回值   当前组件的数据源
<script>
export default {
 name:"container",
 data() {
  return {
     person:[
      {
        name:"Lucy",
        age:"15",
        sex:"male"
      },
       {
        name:"Linda",
        age:"15",
        sex:"female"
      },
       {
        name:"Bob",
        age:"15",
        sex:"male"
      }
  },
  methods: {
    // 事件调用的方法
    clickbtn1() {
      console.log("点击我");
    },
    clickbtn2() {
      console.log("事件绑定的简写");
    },
    pipeclick() {
      console.log("冒泡");
    },
    getThis() {
      // 事件里面的this 指当前vue  component 组件
      console.log(this);
    },
    getEvent(e) {
      // 事件里面的e  event  和之前的js 里面的事件参数是一致的
      console.log(e);
      // 下面两个指点击的目标元素
      console.log(e.target);
      console.log(e.srcElement);
    },
    navmethod(e) {
      // 事件的委托 父元素事件委托给子元素执行
      let node = e.target;
      if (node.nodeName.toLowerCase() == "li") {
        console.log(node);
      }
    },
    fun(e) {
      console.log(e.target);
    },
}
</script>
<style>
.menu {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
.b1 {
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.b2 {
  width: 200px;
  height: 200px;
  border: 1px solid blue;
}
.b3 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
</style>

vue-数据双向

<template>
 <div class="container">
   <!-- vue里面的数据双向原则 
    数据双向绑定指令  v-model=""  一般使用在表单元素上
    -->
    <input type="text" @change="changeName" v-model="username" />
    <!-- 下面的这种数据绑定是单向的 -->
    <input type="text" @change="changeName" :value="username" />
 </div>
</template>
// 当前模板的js
// name  指当前组件的名称
//data 函数里面带返回值   当前组件的数据源
<script>
export default {
  name:"container",
 data() {
  return {
    username:"阿七",
  }
 },
 method(){
	changeName() {
      //view 层  发生变化输出model 中的数据
      console.log(this.username);
    },
}
}
</script>

vue-ref 获取虚拟dom

<template>
 <div class="container">
   <button @click="getDom">获取dom元素操作</button>
   <!-- 通过ref 属性命名 -->
   <div ref="refele"></div>
 </div>
</template>
// 当前模板的js
// name  指当前组件的名称
//data 函数里面带返回值   当前组件的数据源
<script>
import $ from "jquery";
export default {
  name:"container",
 data() {
  return {
    username:"阿七",
  }
 },
 method(){
	getDom() {
      //获取的时候  this.$refs.名称
      //就可以拿到元素
      let refs = this.$refs.refele;
      //返回的是原生js dom
      refs.innerHTML = "<b>获取dom</b>";
      console.log(refs);

      // vue 使用jquery
      //安装jquery  cnpm install jquery --save-dev 安装到devDependencies
      //安装    cnpm install jquery --save  安装到dependencies

      //哪个组件使用  给谁引用   import $ from 'jquery'
      //引入完成之后  输出  $
      console.log($(refs));
      $(refs).css({
        width: 300,
        height: 300,
        border: "1px solid red"
      });
}
}
</script>