<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
<button v-on:click="reverseMessage">反转内容</button>
<div v-if="seen" style="border: 2px solid red;">seen</div>
<button v-on:click="ifseen">v-if绑定</button>
<div class="list">
<ul>
<li v-for="(item) in list">
{{item}}
</li>
</ul>
</div>
<input type="text" v-model="inputVal"><br>
这是input中的信息 : {{inputVal}}
<hr>
<todo-list v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-list>
<div style="border: 1px solid red; margin: 30px;">
数据与方法
<ul>
<li v-for="(item) in data">
{{item}}
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
//数据与方法-------------------------------------
var data = {
a: 1,
b: 2
}
// console.log(data)
// 当一个 Vue 实例被创建时,它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
//在浏览器控制台中 app.data == data 结果是true 改变两者的任一方的值都会影响另一个的值 并讲页面重新渲染。除非使用 Object.freeze(obj)之后才不会改变
//
// -------------------------------------------------
Vue.component('todo-list', {
template: '<li>{{todo.text}}<button @click="subClick">click</button></li>', //这个只能系的在一个容器中,写多了不会显示
props: ['todo'],
methods: {
subClick() {
console.log(111)
}
}
})
//创建一个vue实例
var app = new Vue({
//以下的内容全称为选项
el: '#app',
data: {
data: data,
message: 'hello vue',
seen: true,
list: ['aaa', 'bbb', 'ccc'],
inputVal: '',
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
},
methods: {
ifseen() {
this.seen = !this.seen
},
reverseMessage() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
vue回顾文档--day1
最新推荐文章于 2024-10-01 17:17:19 发布