20个vue.js基础示例代码（1-20）

1、Vue.js如何获取Url查询字符串值？

url地址"/mypage?q=food"; 

this.$route.query.q;

2、Vue.js获取字符串长度示例

myvariable.length;

3、Vue.js启用禁用输入字段示例

<div id="app">
  <input type="text" :disabled="isDisabled">
  <button @click="isDisabled = !isDisabled">Enable/Disable</button>
</div>

new Vue({
  el: '#app',
  data: {
    isDisabled: false
  }
})

4、Vue.js滚动到div的底部

var divContainer = this.$el.querySelector("#divId");
divContainer.scrollTop = divContainer.scrollHeight;

5、Vue.Js滚动到页面示例的底部

document.body.scrollTop = document.body.scrollHeight;

6、页面加载中Vue.Js调用函数

new Vue({
    // ...
    methods:{
        myFunction: function() {//definition goes here}
    },
    created: function(){
        this.myFunction()
    }
});

7、Vue.Js Trim 去除字符串空白

<p>{{ text | trim }}</p>

new Vue({
el: '#app',
  data: function() {
    return {
      text: ' This is string having space at both side. '
    }
  },
  filters: {
    trim: function(string) {
      return string.trim()
    }
  }
});

8、Vue.js Substring截取字符串

<div id="app">
  <p>{{ text | subStr}}</p>
</div>

new Vue({
el: '#app',
  data: function() {
    return {
      text: ' This is sample string to show trim method. '
    }
  },
  filters: {
    subStr: function(string) {
      return string.substring(0,15) + '...';
        }
  }
});

9、Vue.Js if else

<div id="mainDiv"></div>

new Vue({
    el: "#mainDiv",
    template: '<div v-if="name"><span v-text="name"></span></div>',
    data: {
       name: "John"
    } 
});

10、Vue.js Mouseover事件

扫描二维码关注公众号，回复： 9337717 查看本文章

<div id="myDiv">
    <div v-show="active">Show</div>
    <div v-on="mouseover: mouseOver">Mouse Hover over to test!</div>
</div>

var demo = new Vue({
    el: '#myDiv',
    data: {
        active: false
    },
    methods: {
        mouseOver: function(){
            this.active = !this.active;   
        }
    }
});

11、Vue.js强制重新加载重新渲染页面视图示例

vm.$forceUpdate();

12、Vue.Js Focus输入元素示例

Vue.directive('focus', {
    inserted: function (el) {
        el.focus()
    }
});

13、Vue.JS watch监听改变值事件

<div id="app">
    {{ message }}
    <span>{{myVal}}</span><br />
    <input v-model="myVal">
</div>

new Vue({
    el: '#app',
    data: {
        message: 'On change event example',
        myValue: 50
    },
    watch: {
        'myValue': function(val, preVal){
        if (val < 50) {
            this.message= 'Value is less than 50';
        }else{
          this.message= 'Value is greater than 50';
        }
      }
    }
})

14、Vue.JS检查Object或Array是否为空示例

<ul id="exampleApp">
  <li v-if="!items.length">No item found</li>
  <li v-for="item in items">
    <!--do whatever you want-->
  </li>
</ul>


var exampleApp = new Vue({
  el: '#exampleApp',
  data: {
    items: []
  }
});

15、Vue.js获取数组长度

<ul id="exampleApp">
  <li v-if="items.length">Object Length = {{items.length}}</li>
  <li v-for="item in items">
    {{ item.fruit }}
  </li>
</ul>

var exampleApp = new Vue({
  el: '#exampleApp',
  data: {
    items: [
      { fruit: 'Mango' },
      { fruit: 'Apple' },
      { fruit: 'Banana' }
    ]
  }
});

16、Vue.js数组push| 添加元素到数组示例

<div id="app">
   <h1>List</h1>
  <div v-for="(listItem, index) in list">
    <input v-model="listItem.a" value="{{listItem.a}}">
  </div>
  <button @click="addList">
    Add New List
  </button>
  <b>{{ list }}</b>
</div>

 new Vue({
  el: '#app',
  data: {
    list: [{a: 'Hello World!' }]
  },
  methods: {
    addList: function () {
      this.list.push({ a: 'Hello World!' });
    }  
  }
});

17、Vue.js从Array 中删除元素

<div id="app">
   <h1>List</h1>
  <div v-for="(listItem, index) in list">
    <input v-model="listItem.a" value="{{listItem.a}}">
    <button @click="deleteList(index)"> Delete List</button>
  </div>
  <button @click="addList">Add New List</button>
  <b>{{ list }}</b>
</div>

 new Vue({
  el: '#app',
  data: {
    list: [{a: 'Hello World!' }]
  },
  methods: {
    addList: function () {
      this.list.push({ a: 'Hello World!' });
    },
    deleteList: function (index) {
      this.list.splice(index, 1);
    }
  }
});

18、Vue.Js设置textarea值

<div id="app">
   <h1>TextArea</h1>
   <textarea v-model="myTextarea" placeholder="add multiple lines"></textarea>
</div>

 new Vue({
  el: '#app',
  data: {
    myTextarea: ['Hello World!']
  }
 });

 19、Vue.Js获取文本区域值

<div id="app">
   <h1>TextArea</h1>
   <textarea v-model="myTextarea" placeholder="add multiple lines"></textarea>
  <p>TextArea Value = {{myTextarea}}</p>
</div>

new Vue({
  el: '#app',
  data: {
    myTextarea: ['Hello World!']
  }
});

20、如何在Vue.JS示例中使用setTimeOut

<div id="app">
   {{message}}
</div>

new Vue({
  el: '#app',
  data: {
    message:"Hello World!"
  },
  methods:{
    testFunction: function () {
      var v = this;
      setTimeout(function () {
        v.message = "Hi Vue!";
    }, 3000);
   }
  },
 mounted () {
  this.testFunction()
 }
});