Vue基础语法及规范(随时更新)

Vue语法-插值表达式

在app.vue内书写

<template>
  <div>
    <h1>{
  { msg }}</h1>
    <h2>{
  { obj.name }}</h2>
    <h3>{
  { obj.age > 18 ? '成年' : '未成年' }}</h3>
  </div>
</template>

<script>
export default {
  data() { // 格式固定, 定义vue数据之处
    return {  // key相当于变量名
      msg: "hello, vue",
      obj: {
        name: "小vue",
        age: 5
      }
    }
  }
}
</script>

 插值表达式

双大括号 可以把Vue变量直接显示在标签内

Vue中变量声明

data函数内 return的对象 对象内的key就是变量名

Vue基础-MVVM设计模式

如果你按照上一篇文章内下载好了插件,那么就可以通过vue控制台来操控修改数据

这样可以减少dom操作 方便操作

Vue指令-v-bind动态属性

<template>
  <div>
<!-- vue指令-v-bind属性动态赋值 -->
   <a v-bind:href="url">我是a标签</a>
  
  </div>
</template>

<script>
export default {
  data() { // 格式固定, 定义vue数据之处
    return {  // key相当于变量名
   url:'http://www.baidu.com'
    }
  }
}
</script>

 

只需要修改url 即可改变跳转地址啦

Vue指令-v-on事件绑定

<template>
  <div>
<p>你要买商品的数量: {
  {count}}</p>
<button v-on:click="addFn">增加1个</button>
<button v-on:click="addCountFn(5)">一次加5件</button>

<button @click="subFn">减少</button>
  </div>
</template>

<script>
    export default {
        data(){
          return{
            count:10
          }
        },
        methods: {
            addFn(){ // this代表export default后面的组件对象(下属有data里return出来的属性)
                this.count++
            },
            addCountFn(num){
                this.count += num
            },
            subFn(){
                this.count--
            }
        }
    }
</script>

 vue 随机打出一段文字

<template>
  <div>
    <p>{
  { word }}</p>
    <button @click="jockBtnFn">点击说笑话</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      word: '这里是一条笑话',
      jockArr: ['我去相亲网站去了, 那你找到对象了吗? 不! 我找到了他们网站的一个Bug', '这个需求很简单, 怎么实现我不管, 明天上线', '程序员是推动这个世界进步的人']
    }
  },
  methods: {
    jockBtnFn(){
      let randNum = Math.floor(Math.random() * this.jockArr.length)
      let str = this.jockArr[randNum]
      this.word = str
    }
  }
}
</script>

1. 写需求要先写静态标签，再考虑动态效果
2. 绑定点击事件, 然后随机数从数组里取字符串
3. 把字符串赋予给变量word, 影响p标签显示内容

Vue指令-v-on事件对象 阻止默认行为

<template>
  <div>
    <a @click="one" href="http://www.baidu.com">阻止百度</a>
    <hr>
    <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
  </div>
</template>

<script>
export default {
  methods: {
    one(e){
      e.preventDefault()
    },
    two(num, e){
      e.preventDefault()
    }
  }
}
</script>

 无实参的情况下 只需要写函数名字即可 无需传参

有实参情况下需要手动调入$event

Vue指令-v-