Vueの勉強(一)
82367 ワード
1、vueの簡単な例:
解釈:v-bind:classは、:classはバインドclass属性を表すため、class=「color」のcolorは変数であり、class命令は通常のclass属性と共存することができる.
v-model命令は、フォーム、および
v-modelは、内部で異なる入力要素に対して異なる属性を使用し、異なるイベントを放出します(例:https://cn.vuejs.org/v2/guide/forms.html):
textおよびtextarea要素はvalueプロパティとinputイベントを使用して{注意:テキストドメインでの補間({{text}}})は有効ではありません.代わりにv-modelを適用します}
checkedboxとradio checkedプロパティとchangeイベントの使用
selectフィールドはvalueをpropとし、changeをイベントとして{注意:v-model式の初期値がオプションに一致しない場合、要素は「選択されていません」とレンダリングされます.ステータス.iOSでは、最初のオプションを選択できません.この場合、iOSはchangeイベントをトリガーしません.したがって、最初の値が空の無効化オプションを指定することをお勧めします.}
v-once命令は、データが変更されると、補間箇所の内容は更新されません.
{{}}、v-textとv-htmlの違い:{{}}とv-textは内容をそのまま出力し、v-htmlはhtmlラベルが含まれてhtmlラベルのスタイルで出力します.{注意:あなたのサイトで動的にレンダリングされた任意のHTMLは、XSS攻撃を引き起こしやすいため、非常に危険です.信頼できるコンテンツに対してのみHTML補間を使用し、ユーザーが提供したコンテンツに対して補間を使用しないでください}
2、計算属性:
説明:ここでは、計算プロパティ
3、傍受属性:
4、objectとarrayを使用してclassを制御する:
5、classで式制御タイプを書く:
6、vueを使用して行レベルのスタイルを設計する:
7、v-ifの使用:
8、keyユニークトークンを使用してフォーム値の混乱問題を解決する:
9、v-showとv-ifの対比:
解釈:v-show:要素を非表示にします.つまり、スタイルを非表示に設定します.v-if:要素を直接削除します.だからv-showの性能はv-ifより良いが、v-ifの機能はv-showよりよく、v-if、v-else-if、v-elseがある.
10、v-forの使用:
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>vue title>
6 <script src="./lib/vue.js">script>
7 <style>
8 .red {
9 color: red;
10 font-size: large;
11 }
12 style>
13 head>
14 <body>
15 <div id="app">
16 {{hello}}
17 <h1 v-text="hello" :class="color">h1><br/>
18 <input type="text" v-model="hello" /><br/>
19 <span>{{}}: ：span>{{html}}<br/>
20 <span>v-text: ：span><span v-text="html">span><br/>
21 <span>v-html: ：span><span v-html="html">span><br/>
22 div>
23 body>
24 <script>
25 var vm = new Vue({
26 el:'#app',
27 data: {
28 hello: 'MGY',
29 html: ' ，
',
30 color: 'red'
31 }
32 });
33 script>
34 html>解釈:v-bind:classは、:classはバインドclass属性を表すため、class=「color」のcolorは変数であり、class命令は通常のclass属性と共存することができる.
v-model命令は、フォーム、および
v-modelは、内部で異なる入力要素に対して異なる属性を使用し、異なるイベントを放出します(例:https://cn.vuejs.org/v2/guide/forms.html):
textおよびtextarea要素はvalueプロパティとinputイベントを使用して{注意:テキストドメインでの補間({{text}}})は有効ではありません.代わりにv-modelを適用します}
checkedboxとradio checkedプロパティとchangeイベントの使用
selectフィールドはvalueをpropとし、changeをイベントとして{注意:v-model式の初期値がオプションに一致しない場合、要素は「選択されていません」とレンダリングされます.ステータス.iOSでは、最初のオプションを選択できません.この場合、iOSはchangeイベントをトリガーしません.したがって、最初の値が空の無効化オプションを指定することをお勧めします.}
v-once命令は、データが変更されると、補間箇所の内容は更新されません.
{{}}、v-textとv-htmlの違い:{{}}とv-textは内容をそのまま出力し、v-htmlはhtmlラベルが含まれてhtmlラベルのスタイルで出力します.{注意:あなたのサイトで動的にレンダリングされた任意のHTMLは、XSS攻撃を引き起こしやすいため、非常に危険です.信頼できるコンテンツに対してのみHTML補間を使用し、ユーザーが提供したコンテンツに対して補間を使用しないでください}
2、計算属性:
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>vue title>
6 <script src="lib/vue.js">script>
7 head>
8 <body>
9 <div id="app">
10 <input type="text" v-model="n1"> +
11 <input type="text" v-model="n2"> =
12 <input type="text" v-model="sum">
13 div>
14 body>
15 <script>
16 var vm = new Vue({
17 el:'#app',
18 computed: {
19 // getter
20 sum: function () {
21 // `this` vm
22 return this.n1*1 + this.n2*1;
23 }
24 },
25 data: {
26 n1: 0,
27 n2: 0
28 }
29 });
30 script>
31 html>説明:ここでは、計算プロパティ
sumを宣言します.我々が提供する関数は、属性vm.sumのgetter関数として使用される.3、傍受属性:
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>vue title>
6 <script src="lib/vue.js">script>
7 head>
8 <body>
9 <div id="app">
10 <input type="text" v-model="word" />
11 <h1>
12 ：{{result}}
13 h1>
14 div>
15 body>
16 <script>
17 var vm = new Vue({
18 el:'#app',
19 watch: {
20 word: function (newV, oldV) {
21 axios.get('9.php?word='+newV).then(function (response) {
22 app.result = response.data;
23 })
24 }
25 },
26 data: {
27 word: '',
28 result: ''
29 }
30 });
31 script>
32 html>4、objectとarrayを使用してclassを制御する:
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title> object array classtitle>
6 <script src="./lib/vue.js">script>
7 <style>
8 .green {color: green;}
9 .color {color: red;}
10 .font {font-size: 200px;}
11 style>
12 head>
13 <body>
14 <div id="app">
15 <h1 class="green" :class="hd"> h1>
16 <hr>
17 <h2 :class="[success,font]">houdunren.comh2>
18 div>
19 body>
20 <script>
21 var vm = new Vue({
22 el:'#app',
23 data: {
24 hd: {font:true},
25 success: 'color',
26 font: 'font'
27 }
28 });
29 script>
30 html>5、classで式制御タイプを書く:
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title> class title>
6 <script src="./lib/vue.js">script>
7 <style>
8 .success {color: green;}
9 .error {color: red;}
10 style>
11 head>
12 <body>
13 <div id="app">
14 <li v-for="v in news">
15 <span v-bind:class="v.status?'success':'error'">{{v.status}}span>
16 <button v-on:click="changeStatus(v,false)" v-if="v.status"> button>
17 <button v-on:click="changeStatus(v,true)" v-if="!v.status"> button>
18 li>
19 div>
20 body>
21 <script>
22 var vm = new Vue({
23 el:'#app',
24 methods: {
25 changeStatus: function (item, status) {
26 item.status = status;
27 }
28 },
29 data: {
30 news: [
31 {title: ' ', status: true},
32 {title: 'houdunren.com', status: true}
33 ]
34 }
35 })
36 script>
37 html>6、vueを使用して行レベルのスタイルを設計する:
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title> vue title>
6 <script src="./lib/vue.js">script>
7 <style>
8 style>
9 head>
10 <body>
11 <div id="app">
12 <h1 :style="{color:'red',fontSize:size+'px'}"> h1>
13 <h2 :style="style"> h2>
14 <h3 :style="[hdcms]">houdunren.comh3>
15 <input type="number" v-model="size" />
16 div>
17 body>
18 <script>
19 var vm = new Vue({
20 el:'#app',
21 data: {
22 red: 'green',
23 size: 16,
24 style: {
25 color: 'blue'
26 },
27 hdcms: {
28 color: 'yellow',
29 backgroundColor: 'blue'
30 }
31 }
32 })
33 script>
34 html>7、v-ifの使用:
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>v-if title>
6 <script src="./lib/vue.js">script>
7 <style>
8 style>
9 head>
10 <body>
11 <div id="app">
12 <input type="text" v-model="age" />
13 <span v-if="age<20"> span>
14 <span v-else-if="age<30"> span>
15 <span v-else-if="age<50"> span>
16 <span v-else> span>
17 <hr />
18 <input type="checkbox" v-model="copyright" /> <br>
19 <span v-if="!copyright"> span>
20 <button v-else> button>
21 div>
22 body>
23 <script>
24 var vm = new Vue({
25 el:'#app',
26 data: {
27 copyright: false,
28 age: 0
29 }
30 })
31 script>
32 html>8、keyユニークトークンを使用してフォーム値の混乱問題を解決する:
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title> key title>
6 <script src="./lib/vue.js">script>
7 <style>
8 style>
9 head>
10 <body>
11 <div id="app">
12 <template v-if="regType=='mail'">
13 ：<input type="text" name="username" key="mail-register"/>
14 template>
15 <template v-else>
16 ：<input type="text" name="username" key="phone-register"/>
17 template>
18 <br/>
19 <input type="radio" value="mail" v-model="regType"/>
20 <input type="radio" value="phone" v-model="regType"/>
21 div>
22 body>
23 <script>
24 var vm = new Vue({
25 el: '#app',
26 data: {
27 regType: 'mail'
28 }
29 })
30 script>
31 html>9、v-showとv-ifの対比:
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>v-if v-show title>
6 <script src="./lib/vue.js">script>
7 <style>
8 style>
9 head>
10 <body>
11 <div id="app">
12 <h1 v-if="status"> h1>
13 <h1 v-show="status">houdunren.comh1>
14 <input type="checkbox" v-model="status" />
15 div>
16 body>
17 <script>
18 var vm = new Vue({
19 el: '#app',
20 data: {
21 status: true
22 }
23 });
24 script>
25 html>解釈:v-show:要素を非表示にします.つまり、スタイルを非表示に設定します.v-if:要素を直接削除します.だからv-showの性能はv-ifより良いが、v-ifの機能はv-showよりよく、v-if、v-else-if、v-elseがある.
10、v-forの使用:
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>v-for title>
6 <script src="./lib/vue.js">script>
7 <style>
8 style>
9 head>
10 <body>
11 <div id="app">
12 <table border="1">
13 <tr>
14 <th> th>
15 <th> th>
16 <th> th>
17 <th> th>
18 tr>
19 <tbody>
20
21 <tr v-for="(field, key) in news">
22 <td>{{key+1}}td>
23 <td>{{field.id}}td>
24 <td>{{field.title}}td>
25 <td>{{name}}td>
26 tr>
27 tbody>
28 table>
29 div>
30 body>
31 <script>
32 var vm = new Vue({
33 el: '#app',
34 data: {
35 name: ' ',
36 news: [
37 {id: 22, title: 'houdunren.com'},
38 {id: 66, title: ' '}
39 ]
40 }
41 });
42 script>
43 html>