</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vue leran</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<div id="app-2">
<span v-bind:title="message" >
<!--
v- 表示vue特性
bind:表示绑定属性，那么可以随便绑定么比如bind:letme,可以的，属于自定义属性；
-->
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
<!-- 条件语句 seen为变量 -->
</div>
<div id="app-4">
<ol>
<!-- 循环结构todo做为临时变量 todos为数据集 类似于 for in -->
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
<!--
on:当..动态监听事件
-->
</div>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
<!-- <input v-bind:value="message"> -->
<!-- 双向绑定意思就是input里面的值改变，app6中的message跟着变，换成v-bind：value 就无法做到了，都是单向，只是JS变量驱动页面值变动 -->
</div>
<!-- 对于组建的理解：首先组建的命名是可以随意的不是一定要像文档里面叫做todo-item，并且这个看似标签的东西是不会被渲染进接口，破坏原始结构的
component : 指定组件名称就行
props : 从单词理解是属性的意思，然而可以配置数组，说明可以同时指定多个属性.
template : 一段解释你的属性需要怎么用的模板
场景：认为组建的核心意义在于打包，把一块业务整合。因为实现app-7方式还有很多。
-->
<div id="app-7">
<!-- ol 标签有序列表 就是效果中1. 2. 3.的由来 -->
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<bingo-item
v-for="item in groceryList"
v-bind:bingo1="item"
v-bind:bingo="item"
v-bind:key="item.id"
></bingo-item>
</ol>
</div>
</body>
</html>
<script>
Vue.component('bingo-item', {
props: ['bingo','bingo1'],
template: '<li>{{ bingo1.text }}{{ bingo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
// split 负责把字符串解开成数组 相当于php的explode
// reverse() 数组倒序
// join 把数组转成字符串 相当于PHP的implode()
}
}
})
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' },
{ text: '老牛逼了' }
]
}
})
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
var app = new Vue({
el: '#app',//需要绑定的节点ID
data: {
message: 'Hello Vue!'
}
})
</script>