全局變量
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
</head>
<body>
? <div id='app'>
? ? ? <my-component></my-component>
? ? ? <my-component></my-component>
? </div>
? ? <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
? ? <script>
? ? ? 全局組件
? ? ? ? Vue.component('my-component',{
? ? ? ? ? ? template:`?
? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="">首頁</a>
? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="">詳情頁</a>
? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? `
? ? ? ? })
? ? ? new Vue({
? ? ? ? ? el:'#app',
? ? ? ? ? data:{},
? ? ? ? ? methods:{},
? ? ? ? ? filters:{},
? ? ? ? ? computed:{},
? ? ? })
? ? </script>
</body>
</html>
局部變量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
? ? <script type="text/javascript">
? ? new Vue({
? ? el:"#app",
? ? data:{},
? ? methods:{},
? ? computed:{},
? ? components:{
? ? "my-component":{
? ? template:`<p>優(yōu)秀</p>`
? ? }
? ? }
? ? })
? ? </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
</head>
<body>
? <div id='app'>
? ? ? <my-father></my-father>
? </div>
? ? <script src='js/vue.js'></script>
? ? <script>
? ? ? Vue.component("my-father",{
? ? ? ? ? template:`
? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? <h1>這是父組件</h1>
? ? ? ? ? ? ? ? ? <my-child v-bind:num='msg'></my-child>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? `,
? ? ? ? ? data:function(){
? ? ? ? ? ? ? return{
? ? ? ? ? ? ? ? ? msg:'我是福組件中的值'
? ? ? ? ? ? ? }
? ? ? ? ? }
? ? ? })
? ? ? Vue.component("my-child",{
? ? ? ? ? props:['num'],
? ? ? ? ? template:`
? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? <li>這是組組件的內(nèi)容1</li>?
? ? ? ? ? ? ? ? ? ? <li>這是組組件的內(nèi)容2</li>?
? ? ? ? ? ? ? ? ? ? <li>這是組組件的內(nèi)容3</li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? <a href='#'>{{num}}</a>
? ? ? ? ? ? </div>
? ? ? ? ? ? `
? ? ? })
? ? ? new Vue({
? ? ? ? ? el:"#app"
? ? ? })
? ? </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
</head>
<body>
? <div id='app'>
? ? ? <my-component></my-component>
? </div>
? <script src='js/vue.js'></script>
? <script>
? ? Vue.component('my-component',{
? ? ? ? template:`
? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? <p>{{mess}}</p>
? ? ? ? ? ? ? ? ? <button @click='alt'>按鈕</button>
? ? ? ? ? ? ? </div>
? ? ? ? `,
? ? ? ? data:function(){
? ? ? ? ? ? return{
? ? ? ? ? ? ? ? mess:'我是組件中的值'
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods:{
? ? ? ? ? ? alt:function(){
? ? ? ? ? ? ? ? alert('bdsjjf')
? ? ? ? ? ? }
? ? ? ? }
? ? })?
? ? new Vue({
? ? ? ? el:"#app",
? ? ? ? data:{
? ? ? ? ? ? msg:'jsdkvg'
? ? ? ? },
? ? ? ? methods:{
? ? ? ? }
? ? })
? ? </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
</head>
<body>
? <div id='app'>
? ? ? <my-father></my-father>
? </div>
? <script src='js/vue.js'></script>
? <script>
? ? ? Vue.component('my-father',{
? ? ? ? ? template:`
? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <my-tit v-bind:tit='title'></my-tit>
? ? ? ? ? ? ? ? ? ? <my-fruit v-bind:fruList='list'></my-fruit>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? `,
? ? ? ? ? data:function(){
? ? ? ? ? ? ? return{
? ? ? ? ? ? ? ? ? list:['apple','pear','banana'],
? ? ? ? ? ? ? ? ? title:'水果列表'
? ? ? ? ? ? ? }
? ? ? ? ? }
? ? ? })
? ? ? Vue.component('my-tit',{
? ? ? ? ? props:['tit'],
? ? ? ? ? template:`
? ? ? ? ? ? ? ? <h2>{{tit}}</h2>
? ? ? ? ? ? ? `
? ? ? })
? ? ? Vue.component('my-fruit',{
? ? ? ? ? props:['fruList'],
? ? ? ? ? template:`
? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? <li v-for="value in fruList">{{value}}</li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? `
? ? ? })
? ? ? new Vue({
? ? ? ? ? el:'#app'
? ? ? })
? ? </script>
</body>
</html>
復(fù)習(xí)
過濾器：
? ? ? ? 全局
? ? ? ? Vue.filter('過濾器的名字'榛了，function(data){ return })
? ? ? ? {{num|過濾器的名字}}
? ? ? ? <p>{{number}}</p>
? ? ? ? 局部
? ? ? ? new Vue({
? ? ? ? ? ? filters:{
? ? ? ? ? ? ? 過濾器的名字:function(data){
? ? ? ? ? ? ? }
? ? ? ? ? ? }蹭越，
? ? ? ? ? ? computed:{
? ? ? ? ? ? ? number:function(){
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? 計算屬性：用來處理復(fù)雜邏輯操作? 后期更容易維護(hù)
組件(component)：組件化開發(fā) 組件可以擴(kuò)展 HTML 元素剂癌，封裝可重用的代碼胜榔。
? ? 全局組件
? ? 局部組件
? ? 注：
? ? ? ? 組件名不可以使用已經(jīng)存在的html元素
? ? ? ? 組件中的data數(shù)據(jù)是一個函數(shù)搅方，并且要有一個返回值
