vue基础语法

基础语法

读取data值：{{}}
插入HTML：v-html
标签属性：v-bind（简写 : ）
条件渲染1：v-if
条件渲染2：v-else
条件渲染3：v-else-if
条件渲染4：v-show（隐藏）
列表渲染：v-for < h3 v-for="(item,index) in names" v-bind:key=“index”>{{item}}{{index}}
事件监听：v-on:click（简写 @click ）
输入绑定：v-model
插槽：v-slot （简写 # ） < template v-slot:s>这是一个插槽< /template>
v-once（控件只渲染一次）
修改兄弟组件值：this .$ parent.$refs.c1.msg=“aaa”

代码样例

1、{{}}、v-html、v-bind

<template>
  <div class="hello"> 
    <h1>{{message }}</h1>
    <h1>{{msg}}</h1>
    <p v-html="message1"></p>
    <a v-bind:href="hrefurl">到百度去</a><br />
    <a :href="hrefurl">到百度去</a><br />
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data(){
    return {//这个json对象中的值，即可在 vue上方的div中进行使用
      message:"hello world",
      msg:"world hello",
      message1:"
我脑袋不灵光
",
      hrefurl:"http://www.baidu.com"
    }
  }
}
</script>

2、v-if、v-else-if、v-else、v-show

<template>
  <div class="hello"> 
      <p v-if="iden">hello world</p>
      <p v-else>
        world hello 
      </p>

      <p v-if="num==1">
        星期一
      </p>
      <p v-else-if="num==2">
        哈哈
      </p>
      <p v-else>
          不知道
      </p>
		 <p v-show="iden">哈哈哈哈show</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {//这个json对象中的值，即可在 vue上方的div中进行使用
        iden:false,
        num:2
    }
  }
}
</script>

3、v-for

<template>
  <div class="hello"> 
      <p :key="index" v-for="(item,index) in arr">{{item}}{{index}}</p>
      <hr />
      <!-- item是value -->
      <!-- name是键得名字  -->
      <!-- index下标 -->
      <p :key="index" v-for="(item,name,index) in dept">{{item}}=={{name}}=={{index}}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {//这个json对象中的值，即可在 vue上方的div中进行使用
       arr:["hello","world","helloworld"],
       dept:{
          deptno:1,
          dname:"销售部",
          loc:"济南"
       }
    }
  }
}
</script>

4、v-on

<template>
  <div class="hello"> 
    <button v-on:click="doclick()">点击事件</button>  
    <button v-on:dblclick="dodblclick()">双击事件</button>  
    <div id="example-3">
      <button v-on:click="say('hi')">参数事件</button>
    </div>
    <form  action="http://www.baidu.com" v-on:submit.prevent="dosubm()">
      <input  type="submit"  value="提交" />
    </form>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data(){
    return {//这个json对象中的值，即可在 vue上方的div中进行使用
    }
  },methods:{
      doclick(){
        console.log("hello world");
      },dodblclick(){
          console.log("我不小心");
      },say:function(message){
          console.log(message);
      },dosubm:function(){//阻止默认原生得js事件
          console.log("我提交了..");
      }
  }
}
</script>

5、v-model

<template>
  <div id="app">
      {{msg}}
     <input type="text" v-model="msg">
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      msg: "hhhhh",
    };
  },
  methods: {
    dochange(val) {
      this.width = val;
    },
  }
};
</script>

6、watch监听器

<template>
  <div class="hello"> 
      <input @blur="doblur()" v-model="str" />
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      str:""
    }
  },methods:{
    doblur(){
      console.log("this is blur function");
    }
  },watch:{
    str(){
      console.log("监听"+this.str);
    }
  }
}
</script>