vue 基础语法及基础应用演示

<template>
    <div class="first">
      <p>{{name}}</p>
      <!-- 1.变量的使用
      1)可以这样理解插值表达式和v-bind对应等号右边的内容,差值表达和v-bind等号右边接收一段js代码
      2)v-bind可以省略 -->
      <!-- 可以用v-bind将一个变量输出到标签的属性上,用法:v-bind:属性名=变量名 -->
      <p :class="curr" v-bind:name="sex">{{age}}</p>
<!-- 2.函数的使用
        1)通过v-on后跟一个事件名字:click,blur等,再用=连接一个事件名,可以给标签绑定一个事件
        2)v-on可以省略写,用@替代
      -->
      <p @click="show">{{obj}}</p>
      <button @click="inset(str)">{{name}}</button>
        <!-- 1)v-if可以和v-else成对使用,还有v-else-if可以使用
        2.v-show和v-if都可以进行展示切换,但是v-show没有v-else来配合,
        3.v-show会一直渲染节点,控制节点的css属性来展示和隐藏,v-if为false时不会渲染dom节点 -->
      <p v-if="state">state为真</p>
      <p v-if="!state">state为假</p>
      <p v-show="state">这里是用show来展示state的true值</p>
      <button @click="chagneState">点击改变state</button>
      <!--4.v-for
          1)v-for循环是,一定要写一个key值,这个key值是为了让vue快速的操作循环生成出来的节点
     -->
     <!-- val为需要循环的值 index为key值，必填项 ,in 后面跟数据所在数组 -->
      <p><span v-for="(val,index) in arr" v-bind:key="index" v-on:click="add(val)">{{val}}</span></p>

      <!-- 5.v-model 绑定输入框的值，根据输入框，实时变化-->
   <p>input <input v-model=input>{{input}}</p>
    </div>
</template>
<script>
export default {
  // 定义数据
    data(){
        return {
            name:"nbaba",
            age:29,
            sex:"男",
            obj:{son:"楠批",age:22},
            curr:"curr",
            str:"这是点击调用方法，方法调用值的数据",
            state:true,
            arr:["菠萝","香蕉","西瓜","梨子"],
            input:"这是input的默认值",
          }
    },
  //定义函数方法
  methods:{
    show(){
      console.log("这是点击事件调用的show方法")
    },
    inset(val){
      console.log(val);
    },
    chagneState(){
        this.state=!this.state
    },
    add(_val){
      console.log(`将${_val}添加购物车`)
    }
  },
  mounted(){
    console.log("这是在页面加载完成,但是展示给用户之前调用的钩子函数")
  },
  watch:{
    //这个函数名就是你要监听的函数的名字,这个函数接收两个参数,第一个参数是新值,第一个参数是旧值
    input(val,old){
      console.log(val,old);
    },
    //如果监听数组的其中一个键,同理可以监听对象的一个键
    "arr.0"(val,old){
      val
      old
      // console.log(val,old)
    },
    //如果是复杂数组,想要监听整个对象,需要设置deep
    arr:{
      deep:true,
      handler(val,old){
      console.log(val,old)
    }
    }
  },
}

</script>

<style>
.first{
  margin: auto;
  width: 600px;
  font-size: 30px;
  font-weight: 300;
  text-align: center;
}
.curr {
  color: aqua;
}
span{
  padding: 0 5px;
}
</style>

 此代码段需要在vue项目中app.vue中运行，为学习vue阶段的自我保存代码，不喜勿喷