美文网首页
Vue.js基础

Vue.js基础

作者: 壹点微尘 | 来源:发表于2017-09-05 21:39 被阅读19次
1.文本渲染
<template>
  <div id="myapp">
    <p v-text="hello"></p>
    <p v-html="hello"></p>
    <p>{{num+1}}</p>
    {{status ? 'success' : 'fail'}}
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        hello: '<span>你是猴子请来的逗比吗?</span>',
        num: 1,
        status: true
      }
    }
  }
</script>

执行结果:


2.列表渲染 v-for 数组 对象 子组件
  • v-for(数组)
<template>
  <div id="myapp">
    <!--普通-->
    <ul>
      <li v-for="item in list">
        {{item.name}} - {{item.price}}
      </li>
    </ul>
    <hr>
    <!--v-text-->
    <ul>
      <li v-for="item in list" v-text="item.name + ' - ' + item.price"></li>
    </ul>
    <hr>
    <!--带序号 并且给奇数行添加一个class=add-->
    <ul>
      <li v-for="(item,index) in list" :class="{add:index % 2}">
        {{item.name}} - {{item.price}} - {{index}}
      </li>
    </ul>

  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        list: [
          {
            name: 'apple',
            price: 34
          },
          {
            name: 'banana',
            price: 56
          }
        ]
      }
    }
  }
</script>

执行结果:


  • v-for(对象) 获取key - value
<template>
  <div id="myapp">
    <!--v-for 对象-->
    <!--只获取value-->
    <ul>
      <li v-for="value in objList">
        {{value}}
      </li>
    </ul>
    <!--获取key -value-->
    <ul>
      <li v-for="(value, key) in objList">
        {{key}} - {{value}}
      </li>
    </ul>

  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        objList: {
          name: 'apple',
          price: 34,
          color: 'red',
          weight: 14
        }
      }
    }
  }
</script>

执行结果:


  • v-for(子组件)
    • 先创建一个a组件
    • 代码a.vue代码如下:
<template>
  <div class="hello">
    {{ hello }}
  </div>
</template>

<script>
  export default {
    data () {
      return {
        hello: 'I am componnet a'
      }
    }
  }
</script>

在MyApp.vue中调用

<template>
  <div id="myapp">
    <componentA v-for="(value, key) in objList"></componentA>
  </div>
</template>

<script>
  import componentA from './components/a.vue'
  export default {
//    注册组件
    components: {componentA},
    data: function () {
      return {
        objList: {
          name: 'apple',
          price: 34,
          color: 'red',
          weight: 14
        }
      }
    }
  }
</script>

执行结果:


3. 列表数据的同步更新方法

数组的 push(),pop(),shift(),unshift(),splice(),sort(),reverse()等都会触发列表的更新;
filter(),concat(),slice()等不会触发列表的更新!

下面两种情形也不会触发列表数据更新

1.为数组的某一项赋值 vm.items[indexOfItem] = newValue,
2.改变数组的长度 vm.items.length = newLength也不会触发列表的更新!

要实现的效果:


列表数据的更新

代码:

<template>
  <div id="myapp">
    <ul>
      <li v-for="item in list">
        {{item.name + '-' + item.price}}
      </li>
    </ul>
    <button v-on:click="addItem">addItem</button>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        list: [
          {
            name: 'apple',
            price: 34
          },
          {
            name: 'banana',
            price: 56
          }
        ]
      }
    },
    methods: {
      //点击按钮新增push触发列表数据的更新
      addItem () {
        this.list.push({
          name: 'pinaapple',
          price: 256
        })
      }
    }
  }
</script>

为数组的某一项赋值 vm.items[indexOfItem] = newValue不会触发列表数据的更新,那么怎么才能让他更新数据呢? 用Vue的set()方法可以办到.

    methods: {
      addItem () {
//      把数组的第 1 个替换成新的值
        Vue.set(this.list, 1, {
          name: 'pinaapple',
          price: 256
        })
      }
    }

效果图:


4. vue标签属性和条件渲染
  • v-bind事件绑定

正常写法

<a v-bind:href="link" v-bind:title="hello"></a>

简写

<a :href="link" :title="title">百度一下,你就上当</a>

代码示例

<template>
  <div id="myapp">
    <!--<a v-bind:href="link" v-bind:title="hello"></a>-->
    <!--简写-->
    <a :href="link" :title="title">百度一下,你就上当</a>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        link: 'https://wwww.baidu.com',
        title: 'title : 百度一下,你就知道'
      }
    }
  }
</script>

实现效果:


v-bind事件绑定
v-bind常用的用法,绑定class 
<template>
  <div id="myapp">
    <a v-bind:class="classStr">百度一下,你就上当</a>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        classStr: 'red-font'
      }
    }
  }
</script>
可以看到class = red-font已经添加上了
v-bind绑定的class和原来的class不冲突
<template>
  <div id="myapp">
    //class="link-href" v-bind:class="classStr"连个不存在冲突
    <a class="link-href" v-bind:class="classStr">百度一下,你就上当</a>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        classStr: 'red-font'
      }
    }
  }
</script>
一个标签可以存在多个class,多个class以空格隔开
v-bind绑定的class内容可以是一个对象
<template>
  <div id="myapp">
    //className为一个对象
    <a class="link-href" v-bind:class="className">百度一下,你就上当</a>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        className: {
          'red-font': false,
          'blue-font': true
        }
      }
    }
  }
</script>
v-bind绑定的class内容可以是一个对象
v-bind绑定的class内容可以是一个数组
<template>
  <div id="myapp">
    <a class="link-href" v-bind:class="className">百度一下,你就上当</a>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        className: ['red-font', 'big-font']
      }
    }
  }
</script>
v-bind绑定的class内容可以是一个数组
竟然还有这操作.....以下操作纯属高能!!!
<template>
  <div id="myapp">
    <a class="link-href" :class="[classA, classB]">百度一下,你就上当</a>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        classA: 'hello',
        classB: 'word'
      }
    }
  }
</script>
还可以这样写 
<template>
  <div id="myapp">
    <a class="link-href" :class="[classA, {'red-font': hasError}]">百度一下,你就上当</a>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        classA: 'hello',
        hasError: true
      }
    }
  }
</script>
v-bind通过内联样式改变style
<template>
  <div id="myapp">
    <a class="link-href" :style="linkClass">百度一下,你就上当</a>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        linkClass: {
          'color': 'red',
          'font-size': '20px'
        }
      }
    }
  }
</script>
修改内联样式
  • v-if 和 v-show
<template>
  <div id="myapp">
    <a v-if="isPartA">partA</a>
    <a v-show="!isPartA">partB</a>
    <button v-on:click="toggle">切换</button>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        isPartA: true
      }
    },
    methods: {
      toggle () {
        this.isPartA = !this.isPartA
      }
    }
  }
</script>
v-if 和 v-show
v-if和v-else也能实现上面👆的效果
<template>
  <div id="myapp">
    <a v-if="isPartA">partA</a>
    <a v-else>no data</a>
    <button v-on:click="toggle">切换</button>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        isPartA: true
      }
    },
    methods: {
      toggle () {
        this.isPartA = !this.isPartA
      }
    }
  }
</script>
v-if和v-else
5.事件绑定 - 内置事件绑定、自定义事件绑定
<button v-on:click="toggle">切换</button>

可以简写为

<button @click="toggle">切换</button>

  • 内置事件绑定

阻止冒泡的事件

<button @click.stop="toggle">切换</button>
常用的事件修改器:keydown
  1. @keydown输入框输入内容或者内容更改都会触发执行
<input type="text" @keydown="onkeydown">

......

<script>
  export default {
    methods: {
      onkeydown () {
        console.log('on key down')
      }
    }
  }
</script>
  1. 通过指定修改器 @keydown.enter当敲击键盘enter时触发执行
    也可以采用keycode : 如,@keydown.13;获得相同的效果
<input @keydown.enter="onkeydown">
//这两个效果一样
<input @keydown.13="onkeydown">

......

<script>
  export default {
    methods: {
      onkeydown () {
        console.log('on key down')
      }
    }
  }
</script>

  • 自定义事件绑定

自定义事件绑定一般用在自定义组件上
在自定义组件a.vue上代码如下

<template>
  <div class="hello">
    {{ hello }}
    <button @click="emitMyEvent">emit</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        hello: 'I am componnet a'
      }
    },
    methods: {
      emitMyEvent () {
//        触发自定义事件 my-event 并传递一个参数 this.hello
        this.$emit('my-event', this.hello)
      }
    }
  }
</script>

在调用的组件中

<template>
  <div id="myapp">
    <!--在父组件中监听了 comA 的 my-event 事件 当触发的时候 我们执行了 onComaMyEvent -->
    <comA @my-event="onComaMyEvent"></comA>
  </div>
</template>

<script>
  import comA from './components/a.vue'
  export default {
    components: {comA},
    methods: {
//      parmfromA为传递过来的参数
      onComaMyEvent (parmfromA) {
        console.log(parmfromA)
      }
    }
  }
</script>
6.事件绑定-表单事件绑定

  • input

<template>
  <div id="myapp">
    <!--
    input的事件绑定与普通的事件绑定的区别:
    input是双向绑定
    事件绑定采用v-model
    -->
    <input type="text" v-model="myVal">
    <!--将表单的内容显示出来-->
    {{myVal}}
  </div>
</template>

<script>
  import comA from './components/a.vue'
  export default {
    components: {comA},
    data () {
      return {
        myVal: ''
      }
    }
  }
</script>
v-model双向绑定
修饰符：.lazy当敲击键盘enter时,数据才会更新
<input type="text" v-model.lazy="myVal">
......
v-model.lazy 当敲击enter时表单后面的显示才会更新
其他修饰符

.number - 输入字符串转为数字,如果不加.number
.trim - 输入首尾空格过滤

  • intput - checkbox 复选框 多选

还是用v-model绑定,设定都指向myVal ,myVal要设为一个数组,数组里面插进去的值,是从input的value中获取的.

<template>
  <div id="myapp">
    {{myVal}}
    <br>
<!--多选-->
    <input type="checkbox" name="" value="apple" v-model="myVal">
    <label >apple</label>
    <input type="checkbox" name="" value="banana" v-model="myVal">
    <label >apple</label>
    <input type="checkbox" name="" value="orange" v-model="myVal">
    <label >apple</label>

  </div>
</template>

<script>
  import comA from './components/a.vue'
  export default {
    components: {comA},
    data () {
      return {
        myVal: []
      }
    }
  }
</script>
input多选框的绑定

  • intput - radio 单选

<template>
  <div id="myapp">
    {{myVal}}
    <br>
    <!--select-->
    <!--
    为什么默认选种是空的?
    刚开始时,myVal是空的,因为是双向绑定,option里面是没有当前的myVal,所以在这个组件里面是没有被选中的.如果把myVal刚开始设为0 (myVal: '0'),则开始默认为apple.
    -->
    <select name="" id="" v-model="myVal">
      <option v-for="item in options" :value="item.value">{{ item.name }}</option>
    </select>

  </div>
</template>

<script>
  import comA from './components/a.vue'
  export default {
    components: {comA},
    data () {
      return {
//        默认值为0,如果设为''空的话,初始化没有默认选种
        myVal: '0',
        options: [
          {
            name: 'apple',
            value: '0'
          },
          {
            name: 'banana',
            value: '1'
          },
          {
            name: 'orange',
            value: '2'
          }
        ]
      }
    }
  }
</script>
select的v-model的绑定

7 计算属性和数据监听

  • 计算属性 computed
    需求:把表单输入的内容中,将数字替换掉
<template>
  <div id="myapp">
    {{myValueWithoutNum}}
    <br>
    <input type="text" v-model="myValue">

  </div>
</template>

<script>
  export default {
    data () {
      return {
        myValue: ''
      }
    },
//    计算属性
    computed: {
      myValueWithoutNum () {
//        把输入的数字替换为空
        return this.myValue.replace(/\d/g, '')
      }
    }
  }
</script>
计算属性
以上效果👆可以通过meyhods调用方法 实现 
<template>
  <div id="myapp">
    <!--{{myValueWithoutNum}}-->
    {{ getMyValueWithoutNum() }}
    <br>
    <input type="text" v-model="myValue">
  </div>
</template>

<!--
这两种方式实现了同样的效果,
那么这两种方式有什么不同呢?
答:一个是通过方法来调用,还有一个是通过计算属性,区别在于计算属性他的更新只会根据myValue来进行更新,如果myValue不再更新,那么计算属性也停止更新;而我们调用 getMyValueWithoutNum()方法时,无论什么时候调用,这个值都会重新去获取myValue进行处理!
-->
<script>
  export default {
    data () {
      return {
        myValue: ''
      }
    },
//    计算属性
    computed: {
      myValueWithoutNum () {
//        把输入的数字替换为空
        return this.myValue.replace(/\d/g, '')
      }
    },
//    调用方法
    methods: {
      getMyValueWithoutNum () {
        //        把输入的数字替换为空
        return this.myValue.replace(/\d/g, '')
      }
    }
  }
</script>

这两种方式实现了同样的效果,那么这两种方式有什么不同呢?
答:一个是通过方法来调用,还有一个是通过计算属性,区别在于计算属性他的更新只会根据myValue来进行更新,如果myValue不再更新,那么计算属性也停止更新;而我们调用 getMyValueWithoutNum()方法时,无论什么时候调用,这个值都会重新去获取myValue进行处理!

  • 属性监听 watch
<template>
  <div id="myapp">
    <input type="text" v-model="myValue">
  </div>
</template>

<script>
  export default {
    data () {
      return {
        myValue: ''
      }
    },
//监听myValue属性
    watch: {
      myValue: function (val, oldVal) {
        console.log(val, oldVal)
      }
    }
  }
</script>
watch属性监听

相关文章

网友评论

      本文标题：Vue.js基础

      本文链接：https://www.haomeiwen.com/subject/fgjpjxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Vue.js基础|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！