Vue.js基础

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

@keydown输入框输入内容或者内容更改都会触发执行

<input type="text" @keydown="onkeydown">

......

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

通过指定修改器 @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属性监听

最后编辑于：2017.12.10 06:18:51

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,242评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,769评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,484评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,133评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,007评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,080评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,496评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,190评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,464评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,549评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,330评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,205评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,567评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,889评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,160评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,475评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,650评论 2赞 335

Vue.js基础

1.文本渲染

2.列表渲染 v-for 数组 对象 子组件

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

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

4. vue标签属性和条件渲染

v-bind常用的用法,绑定class

v-bind绑定的class和原来的class不冲突

v-bind绑定的class内容可以是一个对象

v-bind绑定的class内容可以是一个数组

竟然还有这操作.....以下操作纯属高能!!!

v-bind通过内联样式改变style

v-if和v-else也能实现上面👆的效果

5.事件绑定 - 内置事件绑定、自定义事件绑定

内置事件绑定

常用的事件修改器:keydown

自定义事件绑定

6.事件绑定-表单事件绑定

input

修饰符：.lazy当敲击键盘enter时,数据才会更新

其他修饰符

intput - checkbox 复选框 多选

intput - radio 单选

7 计算属性和数据监听

推荐阅读更多精彩内容

2.列表渲染 v-for 数组对象子组件

v-bind常用的用法,绑定`class`

修饰符：`.lazy`当敲击键盘`enter`时,数据才会更新

intput - checkbox 复选框多选