1.介紹
https://www.bilibili.com/video/av20720090/?p=1
https://cn.vuejs.org/v2/guide/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../static/vue.js"></script>
</head>
<body>
<div id="app">
<p>
{{msg}}
</p>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
msg:'你好!'
}
});
</script>
</body>
</html>
打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，
并修改 app.message 的值，你将看到上例相应地更新。
---------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../static/vue.js"></script>
</head>
<body>
<div id="app">
<p v-bind:title="title" v-if="seen">
{{msg}}
</p>
<p>
<input type="text" v-model="msg">
</p>
<p>
<button v-on:click="reverse">反轉</button>
</p>
<ul>
<li v-for="td in todos">{{td.text}}</li>
</ul>
<ol>
<cpt v-for="td in todos" v-bind:item="td" v-bind:key="td.id"></cpt>
</ol>
</div>
<script>
Vue.component('cpt',{
props:['item'],
template:'<li>{{item.text}}-{{item.id}}</li>'
});
var app=new Vue({
el:'#app',
data:{
msg:'你好!123456789',
title:'页面加载于 ' + new Date().toLocaleString(),
seen:true,
todos: [
{ id:1, text: '学习 JavaScript' },
{ id:2, text: '学习 Vue' },
{ id:3, text: '整个牛项目' }
]
},
methods:{
reverse:function(){
this.msg=this.msg.split('').reverse().join('')
},
}
});
</script>
</body>
</html>
沒有留言:
張貼留言