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}}</ h3>
事件监听: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:"<h1>我脑袋不灵光</h1>",
      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>
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页