vue基础语法

vue基础语法<一>

1. v-bind：动态绑定（语法糖写法 ：）
   动态绑定href - - - v-bind: href=“值” (:href=“值”)
   动态绑定class - - - v-bind:class=“{类名: boolean}” (:class=“{类名: boolean}”)
   动态绑定style - - - v-bind:style=“{属性: ‘值’} " (:style=”{属性：‘值’ }")
   示例：

<div id="test">
  <a :href="address">百度</a>
  <h2 :class="{active: isActive}" :style="{color: textColor}">这里是动态绑定</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#test',    //绑定id
    data: {         //数据存储,这里的数据可通过函数修改
      address: 'http://baidu.com',
      isActive: true,
      textColor: 'red'  //注意样式绑定时，值为字符串
    }
  })

2. v-on: 事件监听 （语法糖写法 @）
   参数问题：
   方法没有参数时，事件调用不加小括号
   方法定义是需要一个参数，但是事件调用时省略小括号，Vue会默认将浏览器生成的event事件对象传入方法
   方法定义时需要event事件对象，同时还需要其他参数，event参数需写成 $event

   修饰符：
   阻止事件冒泡：.stop

<div id="test">
  <div @click="divClick">
<!-- 如果不加 .stop 则点击按钮时，两个函数都会被执行，即事件冒泡，加上之后divClick事件不会执行-->
    <button @click.stop="bntClick">点击</button>  
  </div>
</div>

<script src="../js/vue.js"></script>
    <script>
    const app = new Vue({
      el: '#test',    //绑定id
      methods: {      //定义方法
        divClick() {
          console.log("被点击了");
        },
        bntClick() {
          console.log("被点击了");
        }
      }
    })
    </script>

阻止默认事件：.prevent
监听键盘的事件 ：@keyup（键盘抬起）@keydown（键盘按下）@keyup.enter（输入回车）
监听组件：.native
只触发一次：.once

3. v-if 和 v-else 和 v-else-if
   问题：v-if中vue由于虚拟DOM复用标签时没有清楚用户输入数据
   方法：加上key属性。key相同可复用，key不同则重新加载，不复用

   登录切换小案例：用户可选择密码登录或邮箱登录

<div id="test">
  <span v-if="isUser">
    <label for="userName"></label>
      用户账号
      <input text="text" id="userName" placeholder="用户账号" key="name"/>
      <!-- 如果input两者不加上不同的key属性，则当用户一开始使用账号登录，输完数据后中途想切换到邮箱
        登录，则中途的数据不会被清空
        -->
  </span>
  <span v-else>
    <label for="email"></label>
      用户邮箱
      <input text="text" id="email" placeholder="用户邮箱" key="email"/>
  </span>
  <button @click="isUser = !isUser">切换</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#test',    //绑定id
    data: {
      isUser: true
    }
  })
</script>

v-show与v-if：两者都是在条件为true时显示，但是当条件为false时，两者消失的方法不同。v-if 为false时，元素根本不会存在在DOM中，为true是再重新被创建。v-show为false时，元素还存在，只是给元素样式增加了display:none。

4. v-for
   遍历数组 v-for=" (item , index) in info "
   遍历对象 v-for=" ( value , key , index ) in info" //注意：value在先
   数组中能做到响应式的方法：
   push() //在末尾添加
   pop() //删除最后一个
   shift() //删除第一个
   unshift() //在最前面添加元素
   splice() // 删除/插入/替换元素
   sort() //排序
   reverse() //倒序
   注意：通过索引值改变元素不能实时响应
5. v-model : 表单双向绑定
   原理：v-bind绑定一个value属性 和 v-on 给当前元素绑定input事件

<div id="test">
<!--  <input type="text" v-model="message"/>-->
<!--  <input type="text" :value="message" v-on:input="valueChange"/>-->
  <input type="text" :value="message" v-on:input="message = $event.target.value"/>
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#test',    //绑定id
    data: {
     message: '你好啊'
    },
    methods: {
      valueChange(event){
        this.message = event.target.value;
      }
    }
  })
</script>

结合radio单选框

<div id="test">
  <label for="male">
    <input type="radio" id="male" v-model="sex" value="男"/>男
  </label>
  <label for="female">
    <input type="radio" id="female" v-model="sex" value="女"/>女
  </label>
  <h2>您选择的性别是: {{sex}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#test',    //绑定id
    data: {
      sex: ''
    }
  })
</script>

结合checkbox使用
值绑定：实质上就是v-bind在input中的应用

<div id="test">
<!--  1. checkbox单选框-->
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree"/>同意条款
  </label>
  <h2>您的选择是: {{isAgree}}</h2>
<!--  只有同意条款才能点击下一步-->
  <button :disabled="!isAgree">下一步</button>
  <br/>

<!--  2.checkbox多选框-->
  <input type="checkbox" value="篮球" v-model="hobbies"/>篮球
  <input type="checkbox" value="足球" v-model="hobbies"/>足球
  <input type="checkbox" value="乒乓球" v-model="hobbies"/>乒乓球
  <input type="checkbox" value="羽毛球" v-model="hobbies"/>羽毛球
  <h2>您的爱好是：{{hobbies}}</h2>

<!--  3.值绑定   -->
  <label v-for="item in originHobbies">
    <input type="checkbox" :value="item" v-model="hobbies2"/>{{item}}
  </label>
  <h2>您的爱好是：{{hobbies2}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#test',    //绑定id
    data: {
      isAgree: false,
      hobbies: [],
      hobbies2: [],
      originHobbies: ['篮球', '足球', '乒乓球', '高尔夫球', '排球']
    }
  })
</script>

修饰符：
.lazy 在回车或失去焦点时再实时绑定
.number 表单中输入的数据是字符型，该修饰符可规定规定Vue取出的是number型数据
.trim 去除去除数据中的空格

6. 其他标签
   v-pre 预定义
   v-html 解析为html代码
   v-cloak 斗篷
   v-text