annuaire
1.MVC différence avec MVVM
modèle MVC représente le Model-View-Controller (Modèle - Contrôleur - Voir) modèle.
Vue (View): l'interface utilisateur.
Un contrôleur (contrôleur): la logique métier
modèle (Model): manipulation de données (CRUD)
Le mode interactif est la suivante (photo prise du journal Ruan Yifeng):
Les utilisateurs peuvent envoyer des commandes (événements DOM) à la vue, puis par modèle Voir demande directe de changer l'état, puis mettre à jour Voir les
utilisateurs peuvent également envoyer des commandes directement au contrôleur ( en changeant l'événement déclencheur URL hashchange), puis envoyé au View Controller
MVVM est un raccourci Model-View-ViewModel. Il est essentiellement une version améliorée de MVC.
Vue (View): l'interface utilisateur.
données bidirectionnelles liaison (ViewModel): Voir lié à ViewModel, puis pour effectuer une action qu'une demande. À son tour, la communication avec le modèle ViewModel, lui dire de mettre à jour la réponse de l' interface utilisateur
modèle (Model): exploitation de données
en mode interactif est la suivante:
Résumé: MVC et fait MVVM, les différences ne sont pas significatives. Il est une sorte de conception. Principalement dans le contrôleur mvc évolué en MVVM dans viewmodel. MVVM principalement pour résoudre un grand nombre de manipulations DOM Mvc la page rendu dégradation des performances, les temps de chargement lent, affectant l'expérience utilisateur. VM fournit des données dans les deux sens de liaison lorsque les données du Model View et il y a un changement, l'autre vont changer
La structure du code de base 2.Vue
<!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>
</head>
<body>
<!--将来new的Vue的实例会控制这个元素的所有内容-->
<div id="app"></div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app", //当前我们new的这个Vue实例要控制页面上的哪个区域
data: {
msg: "HelloWorld" //data属性中，参访的是el中要用到的数据
},
methods: {
},
});
</script>
</body>
</html>
L'utilisation de commandes communes 3.Vue
1. expression {} {interpolation}, les données insérées dans la page de données, remplacera l'espace réservé lui - même, il ne voit pas clairement le contenu original des éléments
de manteau :( en réglant l' affichage de style: none) solution d' interpolation expression scintillement
3.v texte: (v-text = 'données dans le nom de l' attribut « ) remplace le contenu d' origine de l'élément, le scintillement
4.v-html: (v-html =' données d'attribut de nom dans « ) dans les balises HTML, il remplace le contenu original des éléments
5.v-fois: non modifier les données. étiquette P avec v-affichage une fois est que la valeur initiale du msg, msg ne peut être modifié avec les changements.
6.v-bind: (v-bind : title = " données de nom d'attribut de 'js de syntaxe juridiques' + ') pour les propriétés de liaison, en abrégé:
7.v-ON: (ON-V: Click = « show ») pour des événements de liaison, en abrégé @
8.v-Model: données bidirectionnelles entre un état d'application et un des éléments de forme liée
9.v-pour: instruction en boucle, sur la base d' une liste de rendu d' un tableau ou d' un objet, doivent respecter les valeurs clés à utiliser.
10.v-si: La valeur true ou false la condition d' expression, détruire ou élément d'étiquette de reconstruction. tag p rendu drapeau est vrai, de ne pas rendre à faux
11.v-show: L'expression de la valeur de condition vraie ou fausse, l'élément de commutation CSS d'affichage d'attribut. drapeau sera défini sur false propriété d'affichage des balises p sans pareil
<div id="app">
<p v-once>{{ msg }}</p>
<p v-cloak>{{msg}}显示出来了</p>
<p v-text="msg"></p>
<p v-html="htmlmsg"></p>
<p v-once>{{msg}}</p> //显示msg的初始值，不会随着msg被修改而变化。
<a v-bind:href="url"></a>
<a :href="url"></a> //简写
<button v-on:click="show">BOTTON</button>
<button :click="show">BOTTON</button> //简写
<input v-model="name"></input> //输入值的改变，会即时在下面显示
<p>{{ name }}</p>
<ul>
<li v-for="(item,index) in myarray"> {{ item }} </li>
</ul>
<p v-if="flag">123</p> //flag 为true 渲染<p>标签，false 不渲染
<p v-show="flag">123</p> //flag 为 false 将<p> 标签的 display属性设置为 none
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "HelloWorld" ,
htmlmsg:"<p>hello world</p>",
name:"",
url:"www.baidu.com",
myarray:[1,2,3],
flag:true
},
methods: {
show(){
console.log(123)
}
},
});
</script>
v-si elle est utilisée avec un résumé v-show:
v-si ou non est contrôlée par l'élément de commande de noeud présence explicite et implicite dom, v-show est fourni par le style d'affichage des éléments DOM, l' affichage du bloc, pas caché;
V -si une consommation plus élevée de commutation; v-show rendu initial une consommation plus élevée,
de changer très souvent, en utilisant de préférence v-show, si les conditions changent rarement à l' exécution, en utilisant v-si plus bon.
4. Le modificateur de l'événement (.stop / .prevent / .capture / .Auto / .Une fois)
<a v-on:click.stop="doThis"></a> //阻止单击事件冒泡
<form v-on:submit.prevent="onSubmit"></form> //阻止默认事件，默认提交时重载页面，使用后不会重载页面
<a v-on:click.stop.prevent="doThat"></a> //修饰符可以串联使用，并且使用的顺序很重要
<div v-on:click.capture="doThis">...</div> //添加事件监听器时使用事件捕获模式
<div v-on:click.self="doThat">...</div> //点击自身时才会触发函数，冒泡或捕获都会略过自身
<a v-on:click.once="doThis"></a> //点击事件将只会触发一次
5.Vue mode style de reliure
v-bind: class: dynamique à commutation de classe, v-bind: instructions de classe peut également coexister avec l'attribut de classe conventionnelle
<div class="myclass" v-bind:class="{ active: isActive }"></div>
Les données:
data: {
isActive: true,
hasError: false
}
Résultats rendu:
<div class="myclass active"></div>
v-bind: style:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
Résultats rendu:
<div style="color: red; font-size: 30px;"></div>
