vue浅析
10545 ワード
vue
一、vueのmvvmモード(Model-View-ViewModel)
二、コードのデモ
一、vueのmvvmモード(Model-View-ViewModel)
1、ViewModel Vue.js ， Vue 。Vue html ， html body ， ID 。
2、 ViewModel ， ？
ViewModel (Dom Listeners Data Bindings)
3、 View ,viewModel DOM Listener DOM ， ， Model
4、 Model ， Model ，Data Binddings DOM 二、コードのデモ
<!-- View-->
<div id="app">
{{ message }}
</div>
<script src="js/vue.js"/>
<script>
// Model
var exampleData = {
message: 'Hello World!'
}
// Vue ("ViewModel") View Model
new Vue({
el: '#app',
data: exampleData
})
</script>
Vue MVVM 。
1、 View
2、 Model
3、 Vue "ViewModel"， View Model
4、 {{}}
{{ message }} message </code></pre>
<h3 id=" "> </h3>
<pre><code>MVVM ， Vue.js v-model
<!-- View-->
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>
message ， ，<p>{{ message }}</p> 。
，， message ， </code></pre>
<h3 id=" vue.js "> 、Vue.js </h3>
<pre><code>1、 ？
Vue.js v- ， HTML ， ， ， ，
HTML （attribute）。
2、
v-if
v-show
v-else
v-for
v-bind
v-on
</code></pre>
<h3 id="v-if v-if ">1、v-if (v-if ， )</h3>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">No!</h1>
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</div>
<script src="js/vue.js"/>
<script>
var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
</script>
：
HELLO,,vue.js
yes
age:28
:
yes true， "Yes!" ；
no false， "No!" ；
age >= 25 true， "Age: 28" ；
name.indexOf('jack') >= 0 false， "Name: keepfool" 。</code></pre>
<h3 id="v-show v-show v-if v-show html css style ">2、v-show (v-show ， v-if ， v-show HTML, CSS style 。)</h3>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-show="yes">Yes!</h1>
<h1 v-show="no">No!</h1>
<h1 v-show="age >= 25">Age: {{ age }}</h1>
<h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</div>
<script src="js/vue.js"/>
<script>
var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
</script>
:
HELLO,vue.js
yes
age:28
： css display:none ， </code></pre>
<h3 id="v-else v-else v-if v-show else v-else v-if v-show ">v-else ( v-else v-if v-show “else ”。v-else v-if v-show —— 。)</h3>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<div id="app">
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-else="">Name: {{ name }}</h1>
<h1>--------------------- ---------------------</h1>
<h1 v-show="name.indexOf('keep') >= 0">Name: {{ name }}</h1>
<h1 v-else="">Sex: {{ sex }}</h1>
</div>
<script src="js/vue.js"/>
<script>
var vm = new Vue({
el: '#app',
data: {
age: 28,
name: 'keepfool',
sex: 'Male'
}
})
</script>
:
v-else HTML ， v-if v-show 。
v-if true， v-else HTML；v-show tue， v-else HTML 。</code></pre>
<h3 id="v-for javascript ">v-for ( ， JavaScript ：)</h3>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<link rel="stylesheet" href="styles/demo.css"/>
<div id="app">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.sex }}</td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"/>
<script>
var vm = new Vue({
el: '#app',
data: {
people: [{
name: 'Jack',
age: 30,
sex: 'Male'
}, {
name: 'Bill',
age: 26,
sex: 'Male'
}, {
name: 'Tracy',
age: 22,
sex: 'Female'
}, {
name: 'Chris',
age: 36,
sex: 'Male'
}]
}
})
</script>
</code></pre>
<h3 id="v-bind html attribute v-bindclass">v-bind( ， ， HTML （attribute）， ：v-bind:class)</h3>
<p> ，v-bind class 。</p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<link rel="stylesheet" href="styles/demo.css"/>
<div id="app">
<ul class="pagination">
<li v-for="n in pageCount">
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
</li>
</ul>
</div>
<script src="js/vue.js"/>
<script>
var vm = new Vue({
el: '#app',
data: {
activeNumber: 1,
pageCount: 10
}
})
</script>
v-for="n in pageCount" ，pageCount ， n 0 ， pageCount –1 。</code></pre>
<h3 id="v-on dom v-bind ">v-on( DOM ， v-bind ， :</h3>
<pre><code> ： （ ）， 。
Greet greet() ， Hi say() 。
<meta charset="UTF-8"/>
<title/>
<div id="app">
<p><input type="text" v-model="message"/></p>
<p>
<!--click -->
<button v-on:click="greet">Greet</button>
</p>
<p>
<!--click -->
<button v-on:click="say('Hi')">Hi</button>
</p>
</div>
<script src="js/vue.js"/>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
},
// `methods`
methods: {
greet: function() {
// // `this` vm
alert(this.message)
},
say: function(msg) {
alert(msg)
}
}
})
</script>
</code></pre>
<h4 id="v-bind v-on ">【v-bind v-on 】</h4>
<pre><code>Vue.js v-bind v-on 。v-bind ，v-on @ 。
<!-- -->
<a href="javascripit:;" v-bind:class="activeNumber">{{ n + 1 }}</a>
<!-- -->
<a href="javascripit:;" :class="activeNumber">{{ n + 1 }}</a>
<!-- -->
<button v-on:click="greet">Greet</button>
<!-- -->
<button>Greet</button></code></pre>
</div>
</div>
</div>