Vue基本用法2

叁歲伎倆 2022-05-15 05:55 205阅读 0赞

## 1.条件渲染 ##

通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)，常用的条件指令如下：

v-if

v-if可以控制元素的创建或者销毁

v-else

v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法和v-if大致一样，但是它不支持v-else,它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的：

<h1 v-show="ok">Hello!</h1>

## 2. 列表渲染 ##

通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象，v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

遍历数组

vue对象创建如下：

var example1 = new Vue({
      el: '#example-1',
      data: {
        items: ['foo','bar']
      }
    })

如果想加上索引值，可以加上第二个参数

<ul id="example-2">
      <li v-for="(item, index) in items">
        {
       { index }} - {
       { item.message }}
      </li>
    </ul>

遍历对象

也可以用 v-for 通过一个对象的属性来迭代

<ul id="v-for-object">
      <li v-for="value in object">
        {
       { value }}
      </li>
    </ul>

如果想加上对象属性名，可以加上第二个参数

<ul id="v-for-object">
      <li v-for="(value,key) in object">
        {
       { key }}-{
       { value }}
      </li>
    </ul>

## 3. 事件处理 ##

事件绑定方法

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码，事件的处理，简单的逻辑可以写在指令中，复杂的需要在vue对象的methods属性中指定处理函数。

<div id="example-1">
      
      <button v-on:click="counter += 1">Add 1</button>
      <p>The button above has been clicked {
       { counter }} times.</p>
    </div>
    ......
    var example1 = new Vue({
      el: '#example-1',
      data: {
        counter: 0
      }
    })

methods属性中指定处理函数：

<div id="example-2">
      
      <button v-on:click="greet">Greet</button>
    </div>
    ......
    
    var example2 = new Vue({
      el: '#example-2',
      data: {
        name: 'Vue.js'
      },
      // 在 `methods` 对象中定义方法
      methods: {
        greet: function () {
          // `this` 在方法里指向当前 Vue 实例
          alert('Hello ' + this.name + '!')
        }
      }
    })

事件修饰符

实际开发中，事件绑定有时候牵涉到阻止事件冒泡以及阻止默认行为，在vue.js可以加上事件修饰符

<a v-on:click.stop="doThis"></a>
    
    
    <form v-on:submit.prevent="onSubmit"></form>
    
    
    <a v-on:click.stop.prevent="doThat"></a>
    
    
    <form v-on:submit.prevent></form>

## 4. 表单输入绑定 ##

可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

单行文本框

<input v-model="message" placeholder="edit me">
    <p>Message is: {
       { message }}</p>

多行文本框

<span>Multiline message is:</span>
    <p>{
       { message }}</p>
    <textarea v-model="message" placeholder="add multiple lines"></textarea>

复选框

单个复选框，绑定到布尔值：

<input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{
       { checked }}</label>

多个复选框，绑定到同一个数组：

<div id='example-3'>
      <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
      <label for="jack">Jack</label>
      <input type="checkbox" id="john" value="John" v-model="checkedNames">
      <label for="john">John</label>
      <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
      <label for="mike">Mike</label>
      <br>
      <span>Checked names: {
       { checkedNames }}</span>
    </div>
    
    ......
    
    new Vue({
      el: '#example-3',
      data: {
        checkedNames: []
      }
    })

单选框

<div id="example-4">
      <input type="radio" id="one" value="One" v-model="picked">
      <label for="one">One</label>
      <br>
      <input type="radio" id="two" value="Two" v-model="picked">
      <label for="two">Two</label>
      <br>
      <span>Picked: {
       { picked }}</span>
    </div>
    
    ......
    new Vue({
      el: '#example-4',
      data: {
        picked: ''
      }
    })

下拉框

<div id="example-5">
      <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <span>Selected: {
       { selected }}</span>
    </div>
    ......
    
    new Vue({
      el: '...',
      data: {
        selected:''
      }
    })

## 5. 过滤器 ##

Vue.js允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

{
       { prize | RMB }}
    
    
    <div v-bind:id="rawId | formatId"></div>

过滤器实际上是一个函数，可以在一个组件的选项中定义组件内部过滤器：

filters:{
      RMB:function(value){
        if(value=='')
        {
          return;
        }
        return '¥ '+value;
      }
    }

或者在创建 Vue 实例之前全局定义过滤器：

Vue.filter('Yuan',function(value){
      if(value=='')
      {
        return;
      }
      return value+'元';
    });

此时过滤器'RMB'只能在定义它的对象接管标签内使用，而'Yuan'可以全局使用