<!--
计算属性 computed
https://www.runoob.com/vue2/vue-computed.html
-->
<div id="app">
<p>原始字符串: {{ message }}</p>
<!-- 获取计算后的属性(用于复杂逻辑) -->
<p>computed计算后反转字符串: {{ reversedMessage1 }}</p>
<!-- 我们可以使用 methods 来替代 computed，效果上两个都是一样的，
但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行 -->
<p>methods计算后反转字符串: {{ reversedMessage2() }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
message: 'Runoob!'
},
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
},
computed: {
// 计算属性的 getter
reversedMessage1: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
},
site : {
get:function(){//默认只有 getter
return this.name + ':' + this.message ;
}
set:function(newValue){// 手动提供一个 setter
var vals = newValue.split(' ');
this.name = vals[0]
this.message = vals[ vals.length - 1]
}
}
}
})
</script>
<!--
监听属性watch
https://www.runoob.com/vue2/vue-watch.html
-->
<div id = "computed_props"><!-- 千米与米之间的换算示例 -->
千米 : <input type = "text" v-model = "kilometers">
米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = this.kilometers * 1000 ;
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
// $watch 是一个实例方法
vm.$watch('kilometers', function (newValue, oldValue) {
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
})
</script>
<!----------------------------------------------------->
<!--
表单
表单双向绑定
-->
<div id="app">
<!-- 文本框 -->
<p>input 元素：</p>
<input v-model="message" placeholder="编辑我……">
<p>消息是: {{ message }}</p>
<p>textarea 元素：</p>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
<hr>
<!-- 单选框与复选框 -->
<p>单个复选框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多个复选框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>选择的值为: {{ checkedNames }}</span>
</div>
<hr>
<!-- select下拉框 -->
<select v-model="selected" name="fruit">
<option value="">选择一个网站</option>
<option value="www.runoob.com">Runoob</option>
<option value="www.google.com">Google</option>
</select>
<div id="output">
选择的网站是: {{selected}}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob',
message2: '菜鸟教程\r\nhttp://www.runoob.com' ,
checked : false,
checkedNames: [],
selected : ''
}
})
</script>
<!-- 关于表单修饰符
TODO 待详细了解
-->
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
<!-- 自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值） -->
<input v-model.number="age" type="number">
<!-- 过滤用户输入的首尾空格 -->
<input v-model.trim="msg">
<!----------------------------------------------------->
<!--
组件
element ui中使用了大量el开头的标签 , 可能是通过此种方法实现
-->
<div id="app">
<runoob></runoob>
<child message="hello!"></child>
</div>
<script>
//导入全局组件
import Editor from "@/components/Editor" // 富文本组件
Vue.component('Editor', Editor);
// 注册
Vue.component('child', {
// 声明 props , 用来声明参数名称
props: ['message'],//prop 是子组件用来接受父组件传递过来的数据的一个自定义属性
// 同样也可以在 vm 实例中像 "this.message" 这样使用
template: '<span>{{ message }}</span>'
});
var Child = {//即将应用于实例的组件
template: '<h1>自定义组件!</h1>'
}
new Vue({// 创建根实例
el: '#app',
components: {
// <runoob> 将只在父模板可用
'runoob': Child
}
});
</script>
<!--
组件 : 动态 Prop 和 Prop 验证
参考 : https://www.runoob.com/try/try.php?filename=vue2-component4
https://www.runoob.com/try/try.php?filename=vue2-component5
-->
<div id="app">
<div>
<input v-model="parentMsg">
<br>
<!-- child 是一个自定义的组件标签,上面文本框中的值将动态传入到child组件中 -->
<child v-bind:message="parentMsg"></child>
</div>
<ol>
<todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
</ol>
</div>
<script>
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 "this.message" 这样使用
template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
el: '#app',
data: {
parentMsg: '父组件内容' ,
sites: [
{ text: 'Runoob' },
{ text: 'Google' },
{ text: 'Taobao' }
]
}
});
<!-- Prop 验证
传值类型包含以下 : String,Number,Boolean,Array,Object,Date,Function,Symbol 也可以使用validator自定义验证参数
-->
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String, //type 也可以是一个自定义构造器，使用 instanceof 检测
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
</script>
<!----------------------------------------------------->
<!--
组件自定义事件
(子组件要把数据传递回去，需要使用自定义事件)
使用 $on(eventName) 监听事件 (另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件)
使用 $emit(eventName) 触发事件
https://www.runoob.com/vue2/vue-component-custom-event.html
-->
<div id="app">
<div id="counter-event-example">
<p>{{ total }}</p>
<!-- this.$emit('increment') 触发父组件的事件 -->
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</div>
<script>
//看起来 Vue.component 的结构有点类似 , 有data ,有methods (待了解组件参数)
Vue.component('button-counter', {
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
data: function () {
return {//这样的好处就是每个实例可以维护一份被返回对象的独立的拷贝，如果 data 是一个对象则会影响到其他实例
counter: 0
}
},
methods: {
incrementHandler: function () {
this.counter += 1 ;//this.counter 两个button-counter组件,每个组件的counter都是独立的
this.$emit('increment') ;//触发increment对应的父组件事件
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
</script>
<!-- native修饰符用来监听原生事件-->
<my-component v-on:click.native="doTheThing"></my-component>
<!--
自定义组件的 v-model
https://www.runoob.com/try/try.php?filename=vue2-component8
<input v-model="parentData">
等价于
<input :value="parentData" @input="parentData = $event.target.value">
v-bind: 缩写 : v-on:click缩写@
-->
<div id="app">
<runoob-input v-model="num"></runoob-input>
<p>输入的数字为:{{num}}</p>
</div>
<script>
Vue.component('runoob-input', {
template: `
<p> <!-- 包含了名为 input 的事件 -->
<input
ref="input"
:value="value"
@input="$emit('input', $event.target.value)"
>
</p>
`,
props: ['value'], // 名为 value 的 prop
})
new Vue({
el: '#app',
data: {
num: 100,
}
})
</script>
