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事件

<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() }});