1 字符串逆序对方法:
这个是个小技巧,因为数组有逆序方法,借用了一下数组
‘abcde'.split('').reverse().join('')
2 在线编辑学习网站,在线编程
http://jsbin.com/joxinumota/edit?html,js,console,output
add library,需要google浏览器
3 新增了 Symbol原子类型,目前不知道用途。
4 vue 的slot
1 指定了slot才会在 父组件显示
2 可以指定具体姓名,app.component.name-'xxx' 对应父组件 <span slot='second'>
3 可以指定作用域 就是例如 同一个button,下面两个 slot,第一个slot 有单机事件,第二个没有,则点前一半就触发,后一个不触发,感觉很鸡肋的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue.js wrapper component example (jquery plugin: select2)</title>
<!-- Delete ".min" for console warnings in development -->
<script src="../../dist/vue.min.js"></script>
<style>
html, body {
font: 13px/18px sans-serif;
}
select {
min-width: 300px;
}
</style>
</head>
<body>
<div id="app">
<children>
<span slot="first" @click="tobeknow">12345</span>
<span slot="second">56789</span>
<!--上面这行不会显示-->
</children>
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
tobeknow: function () {
console.log("It is the parent's method");
}
},
components: {
children: { //这个无返回值,不会继续派发
template: "<button><slot name='first'></slot>为了明确作用范围,<slot name='second'></slot>所以使用button标签</button>"
}
}
});
</script>
</body>
</html>
4 没有内容分发到提示:就是 把各种情况都考虑到了,特殊情况,有用父类的填充,没有就用子类的填充
<div id="app">
<children>
<span slot="first">【12345】</span>
<!--上面这行不会显示-->
</children>
</div>
<script>
var vm = new Vue({
el: '#app',
components: {
children: { //这个无返回值,不会继续派发
template: "<div><slot name='first'><button>【如果没有内容则显示我1】</button></slot>为了明确作用范围,<slot name='last'><button>【如果没有内容则显示我2】</button></slot>所以使用button标签</div>"
}
}
});
</script>
5 vue支持es5以上,所以ie8以下不支持,vue 的计算属性可以在 {{}} 中计算,也可以在computed属性下加上属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue.js wrapper component example (jquery plugin: select2)</title>
<!-- Delete ".min" for console warnings in development -->
<script src="../../dist/vue.min.js"></script>
<style>
html, body {
font: 13px/18px sans-serif;
}
select {
min-width: 300px;
}
</style>
</head>
<body>
<div id="app">
{{'mygood'.split('').reverse().join('')}},
{{message}}},{{newmessage}}
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
message:'mygood'
},
computed:{
newmessage:function(){
return this.message.split('').reverse().join('');
}
}
});
</script>
</body>
</html>
5 watch方法 经过测试 ,watch方法和 方法没有关系,和 ,可能会自动调用方法,但是 监听的主要是value,和方法用来计算使用
<div id = "computed_props">
千米 : <input type = "text" v-model = "kilometers">
米 : <input type = "text" v-model = "meters">
fenmi: <input type="text" v-model="fenmi"/>
</div>
<p id="info"></p>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0,
fenmi:0
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = val * 1000;
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
},
fenmi:function(a){
// this.kilometers = a/ 1000/1000;
// this.meters = a/1000;
}
}
});
// $watch 是一个实例方法
vm.$watch('kilometers', function (newValue, oldValue) {
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
})
vm.$watch('fenmi',function(a,b){
document.getElementById ("info").innerHTML=a+":"+b;
})
6 使用v-bind 绑定class
<style>
.class1{
color:red;
}
</style>
testclss:<input type="checkbox" v-model="class1"/>
<div v-bind:class="{'class1':class1}">helllowrld</div>
<div v-bind:class="{'class1': class1}">
directiva v-bind:class
</div>
new Vue({
el: '#app',
data: function() {
return {
class1:false
}
}
})
4 组件功能:分全局和,局部组件(定义在了具体 new Vue里面)
全局组件很特殊,必须用小写,大写有时显示不出来
<realcom></realcom>
Vue.component('realcom',{
template: '<h1 >世界你好</h1>'
});
子模板特点:记得 在 components下的json数据里template
components:{
'selfdef': {template:'<h5>goodlife</h5>'}
},
5 同一个页面可以使用多个vue,已测试通过