-
其他 阿达大
查看全部 -
父组件通过属性向子组件传值；
子组件通过发布$emit向父组件传值；
查看全部 -
vue 入门导图
查看全部 -
Git 简单实用教程
查看全部 -
一、条件渲染
1、v-if，v-else ， v-else-if
2、v-show
二、列表渲染
1、v-for ： v-for="item in list"
三、Class和Style绑定
1、v-bind: -->简写 :style
查看全部 -
查看全部
-
git checkout -b 分支名 在主分支上创建一个新的分支
git checkout 分支名 切换到对应分支
git breach -a 查看所有分支
合并分支，首先切换到主分支，使用git merge 本地分支名，再在主分支上进行git push 提交到远程
git branch -D dev 删除本地名为dev的分支，然后使用
git push origin :dev 注意:dev的冒号前为空
git reset --hard head^ 退回到之前的版本
git log 查看日志
git reflog 之前的提交日志
使用git reset --hard HEAD@{1}或者git reset --hard 44c2edc即可再找到对应的版本
查看全部 -
console.log()
console.error()
alert()阻塞式，执行完才会执行后续代码
debugger 断点
chrome浏览器中console的使用
chrome浏览器vue组件
选项卡一：可以看到页面用到了哪些组件，组件中用到了用哪些属性
选项卡二：监视调试vue中的vuex
Network：查看页面上加载的项
XHR：页面上发起的请求
JS CSS IMG：页面中对应用到的文件
最右侧online选项当需要调试页面上交互可以选择Slow 3G（较慢的网速），看加载的顺序速度loading交互
mounted是vue的生命周期，当页面挂载完成后执行
可以在mounted中定义window.vue=this，然后在chrome浏览器中，console选项卡中使用，window.vue.属性名，或者window.vue.方法名进行调试
可以将vue赋值给一个全局变量，从而取到其中的值
例如 ： var app = new Vue({
el:'#app',
data:{
msg: 'Hello'
}
})
在console调试页面，就可使用app.msg获取到msg的值
查看全部 -
state : 组件的状态（需要管理的或者组件公用的）
mutations : 定义改变状态的方法集
使用vuex，首先定义一个store这样的js文件，在文件中引入vuex
Vue.use(Vuex),定义state和mutations
在组件中使用vuex
首先，使用import引入store(定义了vuex的js文件)。然后在组件的default中引用stroe，在组件中提交或修改，使用store.commit('store中定义的方法名')。使用公共的状态，同样需要引入和在default引用，在data中引用，例如，msg: store.state.属性名。
查看全部 -
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。<div id="app"><div v-if="Math.random() > 0.5">Sorry</div><div v-else>Not sorry</div></div>----------<div id="app"><div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else-if="type === 'C'">C</div><div v-else>Not A/B/C</div></div>查看全部 -
VUE入门查看全部
-
组件化
独立的、可复用的、整体化的
组件化的原因
实现功能模块的复用、高执行效率、开发单页面复杂应用
拆分原则
300行原则（包括样式、逻辑等所有代码）、复用原则（经常去使用，比如头部导航和底部版权）、业务复杂性原则
查看全部 -
:class="['active','more',{'another': item.age<30}]"
当item.age小于30时，有class名another
:
在vue的data中
styleMsg: {
color: 'red',
textShadow: '0 0 5px green'
}
注意，像text-shadow这种带-的css属性名，应用以下写法
'text-shadow': '',
'textShadow':'' (驼峰法)
查看全部 -
computed:{
msg1: function(){
return 'computed:'+this.msg+arr
}
}
注：this.msg为vue实例中data中的msg属性值，arr为vue实例外的变量值
只改变arr，msg1的值不发生变化
改变arr后改变msg，msg1的值中的this.msg和arr同时获取最新的值，发生重新渲染
watch:{
msg:function(newval,oldval){
console.log(newval)
console.log(oldval)
}
}
watch监听属性，当msg值发生改变时触发
watch通常监听一个变量或常量
computed可监听多个变量或常量但一定都是在vue的实例中
查看全部
举报