理解Vue.js - 知乎专栏
{"debug":false,"apiRoot":"","paySDK":"/api/js","wechatConfigAPI":"/api/wechat/jssdkconfig","name":"production","instance":"column","tokens":{"X-XSRF-TOKEN":null,"X-UDID":null,"Authorization":"oauth c3cef7c66aa9e6a1e3160e20"}}
{"database":{"Post":{"":{"title":"理解Vue.js","author":"wengshiwei","content":"一 什么是Vue.js1.1 vue是什么vue是一个web app框架，它提供数据（PJSO，Plain JavaScript Object）和视图（DOM对象，或者说HTML模版）的绑定。修改数据，视图自动更新。vue是一种MVVM，其中Model是PJSO，View是DOM对象，ViewModel由vue提供，它包括一系列DOM listeners和helper functions。# 最小的vue app的例子一个DOM div元素。一个Vue对象，通过id确定绑定的div元素，提供数据。&div id=\"app\"&\n
{{ message }}\n&/div&\n\nnew Vue({\n
el: \"d\",\n
message: 'foo bar'\n
}\n})\n1.2 Vue组件与vue对象vue组件（vue component）与vue实例的关系类似与class与instance。Vue.extend() 可以生成一个vue组件，new该组件生成vue对象。vue对象才可以与DOM元素绑定。1.3 Vue-loadervue-loader用于Webpack，可以把与一个vue component相关联的CSS、JavaScript写在一个文件里，并且把这个文件编译为plain JavaScript module（可以被其他module使用）二 多个vue组件一个Web App很难只由一个vue组件构成。多个vue组件会出现交互问题。2.1 父子组件vue实例的作用域是孤立的。父子组件通过props传递数据。这点和reactjs很像。父子组件也可以通过vue提供的方法获得对方，但是子组件修改父组件是很差的实践。2.2 事件机制vue也提供一套事件机制，用于组件间通信。2.3 Vue-routervue-router提供了一套通过link url切换vue组件的功能。使用多个vue组件带来的问题是，我们是否该用Root Component代表整个app。如果我们在Root Component里储存app的数据，只存一份，那么需要增加很多组件间的交互给其他组件提供数据，如果我们在每个组件里兜储存数据，那么需要格外的数据同步与更新的方法。Vuex提供了一种解决方法。三 Vuex是什么Vuex是vue版的Flux/Redux。vuex主要解决两个问题，一个是在哪里存放整个app的数据（vuex里的store），一个是各个vue组件如何通信（vuex里的action）。Vuex集中管理两种数据，一是整个app的state。整个app只有一份state，存在vuex的state里。所有的vue组件从这里获取data。另一个是action，组件之间无法直接互相通信。所有信息沟通由action完成。Vuex还提供两类函数，一类是getter。getter类似于vue组件中的computed property，也类似于redux中的reducer。getter一定是纯函数。Vue组件可以直接读取vuex的state，也可以调用getter。另一类是mutations。mutations代表对store的修改。任何组件不允许直接修改自身的data。这一点等于是取消了vue本身提供的双向绑定的功能。每个对state的修改，都需要用mutations封装。mutations只用来修改state。复杂、异步的操作使用actions。四 总结Vuejs是一个web框架，它以DOM元素为模版，提供数据绑定的功能。一个web app可能会含有多个vue组件。Vuex是基于vue的web app框架。","updated":"T13:33:45.000Z","canComment":false,"commentPermission":"anyone","commentCount":0,"collapsedCount":0,"likeCount":6,"state":"published","isLiked":false,"slug":"","isTitleImageFullScreen":false,"rating":"none","titleImage":"","links":{"comments":"/api/posts//comments"},"reviewers":[],"topics":[{"url":"/topic/","id":"","name":"草稿"}],"adminClosedComment":false,"titleImageSize":{"width":0,"height":0},"href":"/api/posts/","excerptTitle":"","tipjarState":"closed","annotationAction":[],"sourceUrl":"","pageCommentsCount":0,"snapshotUrl":"","publishedTime":"T21:33:45+08:00","url":"/p/","lastestLikers":[{"profileUrl":"/people/zhengjialux","bio":"北极熊为什么不吃企鹅","hash":"13dcb4e67e156ea7fa29dd77c620e376","uid":60,"isOrg":false,"description":"博客：/zhengjialux/
公众号：lutuyaoy","isOrgWhiteList":false,"slug":"zhengjialux","avatar":{"id":"v2-ddce7dadbdca9e","template":"/{id}_{size}.jpg"},"name":"阁主"},{"profileUrl":"/people/oceanbj","bio":"","hash":"e5a174e35ed8e0bca3cdee","uid":44,"isOrg":false,"description":"trust dreams, trust your heart and trust your story!","isOrgWhiteList":false,"slug":"oceanbj","avatar":{"id":"ed654ee23","template":"/{id}_{size}.jpg"},"name":"oceanbj"},{"profileUrl":"/people/yin-shuo-heng","bio":"","hash":"6b30eb395b76b896cf25e04","uid":379000,"isOrg":false,"description":"","isOrgWhiteList":false,"slug":"yin-shuo-heng","avatar":{"id":"d8b1d0b19b237d07b22990","template":"/{id}_{size}.jpg"},"name":"coding-ing"},{"profileUrl":"/people/guowei-zou","bio":"","hash":"04a67db63af296bbd6b843","uid":60,"isOrg":false,"description":"","isOrgWhiteList":false,"slug":"guowei-zou","avatar":{"id":"607a2e154","template":"/{id}_{size}.jpg"},"name":"guowei zou"},{"profileUrl":"/people/bigfeng","bio":"大三码农 公众号：逢雨 微信号：feng1234yu","hash":"12e7c63e8eb","uid":68,"isOrg":false,"description":"谢谢！","isOrgWhiteList":false,"slug":"bigfeng","avatar":{"id":"3eaef4fd0ab9a35da2fb","template":"/{id}_{size}.jpg"},"name":"冯雨"}],"summary":"一 什么是Vue.js1.1 vue是什么 vue是一个web app框架，它提供数据（PJSO，Plain JavaScript Object）和视图（DOM对象，或者说HTML模版）的绑定。修改数据，视图自动更新。 vue是一种MVVM，其中Model是PJSO，View是DOM对象，ViewModel由vue提供，它包括一系…","reviewingCommentsCount":0,"meta":{"previous":null,"next":null},"annotationDetail":null,"commentsCount":0,"likesCount":6,"FULLINFO":true}},"User":{"wengshiwei":{"isFollowed":false,"name":"翁士伟","headline":"自娱自乐 一意孤行","avatarUrl":"/7f5de73ac_s.jpg","isFollowing":false,"type":"people","slug":"wengshiwei","bio":"。。。","hash":"185302aba727bdccecc1f5","uid":72,"isOrg":false,"description":"自娱自乐 一意孤行","profileUrl":"/people/wengshiwei","avatar":{"id":"7f5de73ac","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false,"badge":{"identity":null,"bestAnswerer":null}}},"Comment":{},"favlists":{}},"me":{},"global":{},"columns":{},"columnPosts":{},"postComments":{},"postReviewComments":{"comments":[],"newComments":[],"hasMore":true},"favlistsByUser":{},"favlistRelations":{},"promotions":{},"switches":{"couldAddVideo":false},"draft":{"titleImage":"","titleImageSize":{},"titleImageFullScreen":false,"canTitleImageFullScreen":false,"title":"","titleImageUploading":false,"error":"","content":"","draftLoading":false,"globalLoading":false,"pendingVideo":{"resource":null,"error":null}},"config":{"userNotBindPhoneTipString":{}},"recommendPosts":{"articleRecommendations":[],"columnRecommendations":[]},"env":{"isAppView":false,"appViewConfig":{"content_padding_top":128,"content_padding_bottom":56,"content_padding_left":16,"content_padding_right":16,"title_font_size":22,"body_font_size":16,"is_dark_theme":false,"can_auto_load_image":true,"app_info":"OS=iOS"},"isApp":false},"sys":{}}问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
自定义了一个组件ponent('combo', {..})，然后在某处模板中用到了&combo id="xxx"&&/combo&
有方法能直接获取到这个combo的vue实例吗？
例如dojo里有dijit.byIdextjs里有ponentQueryjquery里有选择器
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
&combo v-ref:combo& &/combo&
console.log(this.$bo)
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
发现vue devtools完美解决我的问题。。
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App当前位置： >
Vue.js之视图和数据的双向绑定(v-model)教程
来源：技术员联盟┆发布时间： 18:52┆点击：
1、使用v-model指令,使得视图和数据实现双向绑定。v-model主要用在表单的input输入框，完成视图和数据的双向绑定。
2、JavaScript代码
&script type=&text/javascript& src=/edu//&../js/vue-1.0.21.js&&&/script&
&script type=&text/javascript&&
window.onload = function() {
vm = new Vue({
el: '#app',
message: 'Hello World',
3、Html的页面代码
&div id=&app& class=&container&&
&input type=&text& v-model='message'/& &input type=&text& v-model='message'/&
{{message}}
4、完整的代码
&!DOCTYPE html&
&meta charset=&UTF-8&&
&title&&/title&
&link rel=&stylesheet& href=/edu//&../css/bootstrap.min.css& rel=&external nofollow& /&
&style type=&text/css&&
.container{
margin-top: 20
&script type=&text/javascript& src=/edu//&../js/vue-1.0.21.js&&&/script&
&script type=&text/javascript& src=/edu//&../js/jquery.min.js&&&/script&
&script type=&text/javascript&&
$().ready(function() {
var vm = new Vue({
el: '#app',
message: &Hello World ! &
&div id=&app& class=&container&&
&input type=&text& v-model='message'/& &input type=&text& v-model='message'/&
{{message}}
5、效果演示&&&&&&&&&&&
系统安装常见问题
本站发布的系统与软件仅为个人学习测试使用，请在下载后24小时内删除，不得用于任何商业用途，否则后果自负，请支持购买微软正版软件！如侵犯到您的权益,请及时通知我们,我们会及时处理。Access denied | cn.vuejs.org used Cloudflare to restrict access
Please enable cookies.
What happened?
The owner of this website (cn.vuejs.org) has banned your access based on your browser's signature (37ce9b-ua98).Vue.js（6）
上一文，介绍了vue.js动态添加、删除绑定的radio选项，本文介绍如何选中radio的某一项
绑定的数据和上文的model是一致的，选中radio或者checkbox需要注意的是：
不管&input type='radio checked='true''& &你的checked属性值是true或者false，他都会选中。
选中不选中，不是看checked的属性值，而是看有没有checked这个属性，所以，动态选中，不用v-model,也不用checked='true'，判断是否需要渲染checked这个属性就好了.
view 改一下：
&&input type='radio' :name='groupName' :checked='option.checked'&{{option.text}}&
：checked='option.checked' & 如果option.checked为true，他就渲染checked这个属性，否则input元素没有这个属性。
这样绑定后，我们在vue的methods里面设置，把当前索引的radio绑定model的checked属性设置为true，其他的必须设置为false，这样才和上面的绑定对应，不然全是true了，绑定就会有问题了。
checkOption: function (e, optionIndex) {
$.each(vm.options, function (index, item) {
item.checked =
vm.options[optionIndex].checked =
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：46469次
积分：1145
积分：1145
排名：千里之外
原创：70篇
评论：13条
(7)(5)(1)(5)(3)(10)(13)(21)(8)