<div>
<input type="text" name="" id="txt-title">
<button id="btn-submit">submit</button>
</div>
<div>
<ul id="ul-list"></ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var $txtTitle = $('#txt-title');
var $btnSubmit = $('#btn-submit');
var $ulList = $('#ul-list');
$btnSubmit.click(function () {
var title = $txtTitle.val();
if (!title) {
return
}
var $li = $('<li>' + title + '</li>');
$ulList.append($li);
$txtTitle.val('');
})
</script>
<div id="app">
<div>
<input v-model="title">
<button v-on:click="add">submit</button>
</div>
<div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
</div>
<script type="text/javascript">
// data 独立
var data = {
title: '',
list: []
}
// 初始化 Vue 实例
var vm = new Vue({
el: '#app',
data: data,
methods: {
add: function () {
this.list.push(this.title);
this.title = '';
}
}
})
</script>
View 通过
事件绑定
(DOM Listeners) 操作Model; Model通过数据绑定
(Data Bindings)操作View。
var vm = new Vue({
el: '#app',
data: {
name: 'zhangsan',
age: 20
}
})
// vm.name = 'zhangsan'
// vm.age = '20'
var obj = {
name: 'zhangsan',
age: 25
}
console.log(obj.name); // 获取属性的时候,如何监听
obj.age = 26; // 赋值属性的时候,如何监听
上面是无法监听对象的属性的访问以及赋值操作的,直接就产生了操作的结果。
var obj = {}
var _name = 'shangsan'
Object.defineProperty(obj, 'name', {
get: function () {
console.log('get', _name) // 监听
return _name
},
set: function (newVal) {
console.log('set', newVal) // 监听
_name = newVal
}
})
console.log(obj.name); // 可以监听到
obj.name = 'lisi'; // 可以监听到
<div id="app">
<div>
<input v-model="title">
<button v-on:click="add">submit</button>
</div>
<div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
</div>
v-if
v-for
等v-if
v-for
等),必须用JS才能实现(图灵完备)var obj = {
name: 'zhangsan',
age: 20,
getAddress: function () {
alert('beijing')
}
}
// 不使用with
function fn() {
alert(obj.name)
alert(obj.age)
obj.getAddress()
}
fn()
// 使用with
function fn1() {
with(obj) {
alert(age)
alert(name)
getAddress()
}
}
fn1()
<div id="app">
<p>{{price}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
price: 100
}
})
</script>
模板将变成下面这个样子:
function render() {
with(this) { // this 就是 vm
return _c(
'div',
{
attrs: {'id': 'app'}
},
[
_c('p', [_v(_s(price))])
]
)
}
}
在vue源码里alert
render
函数:
以上面vue实现的todolist为例:
with(this){ // this 就是 vm
return _c( // _c创建一个标签
'div',
{
attrs:{"id":"app"}
},
[
_c(
'div',
[
_c(
'input',
{
directives:[
{
name:"model",
rawName:"v-model",
value:(title),
expression:"title"
}
],
domProps:{
"value":(title)
},
on:{
"input":function($event){
if($event.target.composing)return;
title=$event.target.value
}
}
}
),
_v(" "),
_c(
'button',
{
on:{
"click":add
}
},
[_v("submit")]
)
]
),
_v(" "),
_c('div',
[
_c(
'ul',
_l((list),function(item){return _c('li',[_v(_s(item))])}) // _l 解析 v-for 循环
)
]
)
]
)
}