2.4 vue基础语法介绍

模板语法

• {{msg}}

• html赋值: v-html=“”

• 绑定属性: v-bind:id=""

• 使用表达式:{{ok?‘yes’:‘no’}}

• 文本赋值：v-text=""

• 指令 :v-if=""

• 过滤器: {{message|captitalize}}和v-bind:id=“rawid |formatid”

Class 和 Style绑定

• 对象语法：v-bind:class="{actice:isActive}"

  key-value ->active-isActive

• 数组语法 v-bind:class="{acticeClass:errorClass}"

  data:{

  errorClass:“text-danger”

  }

• style绑定-对象语法 ：v-bind:style="{color:activeColor}"

条件渲染

• v-if

• v-else

• v-else-if

• v-show

• v-cloak

vue事件处理器

• v-on:click=“greet” 或者@:click=“greet”
• 加修饰符 v-on:click.stop
• v-on:keyup.enter还有很多修饰符

Vue组件

• 全局组件和局部组件

• 父子组件通讯-数据传递

• Slot

  父组件调用子组件

  import Counter from './Counter'//子组件
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    components:{
      Counter
    }
  }
   
  

  <Counter num="10"></Counter>

  父组件给子组件传递数据：（单向传递，父->子）

  子组件通过prop传递变量

  export default {
    props:["num"],
    data () {
      return {
        num:0
      }
    }
  

  如果想要子组件往父组件传递数据，

  1.父组件中，在子组件的引用中加入子组件的同名方法

   <Counter v-bind:num="num" v-on:increae="increament" v-on:decreae="decreament"></Counter>
  
  //vue实例中也加入同名方法
   methods:{
      increament(){
        this.num++;
      },
      decreament(){
        this.num--;
      },
    }
  

  2.在子组件方法中,调用emit来访问父组件中监听的方法

  methods: {
      increament(){
        this.$emit("increae");
      },
      decreament(){
        this.$emit("decreae");
      },
    },
  

  应用场景：导航栏，父子组件数据双向传递更推荐使用vuex