{"id":68367,"date":"2019-08-16T13:03:58","date_gmt":"2019-08-16T05:03:58","guid":{"rendered":"http:\/\/www.xiaoyebailong.com\/?p=68367"},"modified":"2019-08-19T14:49:04","modified_gmt":"2019-08-19T06:49:04","slug":"20%e4%b8%aavue-js%e5%9f%ba%e7%a1%80%e7%a4%ba%e4%be%8b%e4%bb%a3%e7%a0%81%ef%bc%881-20%ef%bc%89","status":"publish","type":"post","link":"http:\/\/www.xiaoyebailong.com\/index.php\/2019\/08\/16\/68367.htm","title":{"rendered":"20\u4e2avue.js\u57fa\u7840\u793a\u4f8b\u4ee3\u7801\uff081-20\uff09"},"content":{"rendered":"\n

1\u3001Vue.js\u5982\u4f55\u83b7\u53d6Url\u67e5\u8be2\u5b57\u7b26\u4e32\u503c\uff1f<\/em><\/p>\n\n\n\n

url\u5730\u5740”\/mypage?q=food”; <\/p>\n\n\n\n

this.$route.query.q;<\/pre>\n\n\n\n
2\u3001Vue.js\u83b7\u53d6\u5b57\u7b26\u4e32\u957f\u5ea6\u793a\u4f8b<\/em><\/p>\n\n\n\n
myvariable.length;<\/pre>\n\n\n\n
3\u3001Vue.js\u542f\u7528\u7981\u7528\u8f93\u5165\u5b57\u6bb5\u793a\u4f8b<\/em><\/p>\n\n\n\n
<div id=\"app\">  <input type=\"text\" :disabled=\"isDisabled\">  <button @click=\"isDisabled = !isDisabled\">Enable\/Disable<\/button><\/div>new Vue({  el: '#app',  data: {    isDisabled: false  }})<\/pre>\n\n\n\n
4\u3001Vue.js\u6eda\u52a8\u5230div\u7684\u5e95\u90e8<\/em><\/p>\n\n\n\n
var divContainer = this.$el.querySelector(\"#divId\");divContainer.scrollTop = divContainer.scrollHeight;<\/pre>\n\n\n\n
5\u3001Vue.Js\u6eda\u52a8\u5230\u9875\u9762\u793a\u4f8b\u7684\u5e95\u90e8<\/em><\/p>\n\n\n\n
document.body.scrollTop = document.body.scrollHeight;<\/pre>\n\n\n\n
6\u3001\u9875\u9762\u52a0\u8f7d\u4e2dVue.Js\u8c03\u7528\u51fd\u6570<\/em>
<\/p>\n\n\n\n
new Vue({    \/\/ ...    methods:{        myFunction: function() {\/\/definition goes here}    },    created: function(){        this.myFunction()    }});<\/pre>\n\n\n\n
7\u3001Vue.Js Trim \u53bb\u9664\u5b57\u7b26\u4e32\u7a7a\u767d<\/em><\/p>\n\n\n\n
<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()    }  }});<\/pre>\n\n\n\n
8\u3001Vue.js Substrin<\/em>g\u622a\u53d6\u5b57\u7b26\u4e32<\/p>\n\n\n\n
<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) + '...';        }  }});<\/pre>\n\n\n\n
9\u3001Vue.Js if else<\/em><\/p>\n\n\n\n
<div id=\"mainDiv\"><\/div>new Vue({    el: \"#mainDiv\",    template: '<div v-if=\"name\"><span v-text=\"name\"><\/span><\/div>',    data: {       name: \"John\"    } });<\/pre>\n\n\n\n
10\u3001Vue.js Mouseover\u4e8b\u4ef6<\/em><\/p>\n\n\n\n
<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;           }    }});<\/pre>\n\n\n\n
11\u3001Vue.js\u5f3a\u5236\u91cd\u65b0\u52a0\u8f7d\u91cd\u65b0\u6e32\u67d3\u9875\u9762\u89c6\u56fe\u793a\u4f8b<\/em><\/p>\n\n\n\n
vm.$forceUpdate();<\/pre>\n\n\n\n
12\u3001Vue.Js Focus\u8f93\u5165\u5143\u7d20\u793a\u4f8b<\/em><\/p>\n\n\n\n
Vue.directive('focus', {    inserted: function (el) {        el.focus()    }});<\/pre>\n\n\n\n
13\u3001Vue.JS watch\u76d1\u542c\u6539\u53d8\u503c\u4e8b\u4ef6<\/em>
<\/p>\n\n\n\n
<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';        }      }    }})<\/pre>\n\n\n\n
14\u3001Vue.JS\u68c0\u67e5Object\u6216Array\u662f\u5426\u4e3a\u7a7a\u793a\u4f8b<\/em><\/p>\n\n\n\n
<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: []  }});<\/pre>\n\n\n\n
15\u3001Vue.js\u83b7\u53d6\u6570\u7ec4\u957f\u5ea6<\/em><\/p>\n\n\n\n
<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' }    ]  }});<\/pre>\n\n\n\n
16\u3001Vue.js\u6570\u7ec4push| \u6dfb\u52a0\u5143\u7d20\u5230\u6570\u7ec4\u793a\u4f8b<\/em>
<\/p>\n\n\n\n
<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!' });    }    }});<\/pre>\n\n\n\n
17\u3001Vue.js\u4eceArray \u4e2d\u5220\u9664\u5143\u7d20<\/em>
<\/p>\n\n\n\n
<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);    }  }});<\/pre>\n\n\n\n
18\u3001Vue.Js\u8bbe\u7f6etextarea\u503c<\/em>
<\/p>\n\n\n\n
<div id=\"app\">   <h1>TextArea<\/h1>   <textarea v-model=\"myTextarea\" placeholder=\"add multiple lines\"><\/textarea><\/div> new Vue({  el: '#app',  data: {    myTextarea: ['Hello World!']  } });<\/pre>\n\n\n\n
 19\u3001Vue.Js\u83b7\u53d6\u6587\u672c\u533a\u57df\u503c<\/em>
<\/p>\n\n\n\n
<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!']  }});<\/pre>\n\n\n\n
20\u3001\u5982\u4f55\u5728Vue.JS\u793a\u4f8b\u4e2d\u4f7f\u7528setTimeOut<\/em><\/p>\n\n\n\n
<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() }});<\/pre>\n","protected":false},"excerpt":{"rendered":"
1\u3001Vue.js\u5982\u4f55\u83b7\u53d6Url\u67e5\u8be2\u5b57\u7b26\u4e32\u503c\uff1f url\u5730\u5740”\/mypage?q=food”;  2\u3001Vue.js\u83b7\u53d6\u5b57\u7b26\u4e32\u957f\u5ea6\u793a\u4f8b 3\u3001Vue.js\u542f\u7528\u7981\u7528\u8f93\u5165\u5b57\u6bb5\u793a\u4f8b 4\u3001Vue.js\u6eda\u52a8\u5230div\u7684\u5e95\u90e8 5…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[452,1],"tags":[],"topic":[],"class_list":["post-68367","post","type-post","status-publish","format-standard","hentry","category-vue","category-technology"],"_links":{"self":[{"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/posts\/68367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/comments?post=68367"}],"version-history":[{"count":1,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/posts\/68367\/revisions"}],"predecessor-version":[{"id":68368,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/posts\/68367\/revisions\/68368"}],"wp:attachment":[{"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/media?parent=68367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/categories?post=68367"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/tags?post=68367"},{"taxonomy":"topic","embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/topic?post=68367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}