Vue(1)

PHP中文网

发布时间：2017-06-17 17:30:04

1360人浏览过

来源于php中文网

原创

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>vuetesttitle>
 6         <script type="text/javascript" src="vue.min.js">script>
 7     head>
 8     <body>
 9       
10       <div id="vue_id">
11         {{message}}  
12         <br>
13         {{age}}
14       div>
15 
16       
17       <script type="text/javascript">
18         var text={
19           message:"Hello World!",
20           age:16
21         }
22 
23         // 创建一个Vue,；连接view和Model
24         new Vue({
25           el:"#vue_id",//该Vue实例将挂载到...
这个元素
26           data:text //data属性指向Model，data:text表示我们的Model是text对象。
27         })
28 
29       script>
30     body>
31 html>

2.双向数据绑定

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>vuetesttitle>
 6         <script type="text/javascript" src="vue.min.js">script>
 7     head>
 8     <body>
 9       
10       <div id="app">
11         <p>{{message}}p>
12         <input type="text" name="" v-model="message">
13       div>
14       <script>
15         // 这是我们的Model
16         var exampleData = {
17             message: 'Hello World!'
18         }
19 
20         // 创建一个 Vue 实例或 "ViewModel"
21         // 它连接 View 与 Model
22         new Vue({
23             el: '#app',
24             data: exampleData
25         })
26     script>
27     body>
28 html>

3.v-if

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>title>
 6     head>
 7     <body>
 8         <div id="app">
 9             <h1>Hello, Vue.js!h1>
10             <h1 v-if="yes">Yes!h1>
11             <h1 v-if="no">No!h1>
12             <h1 v-if="age >= 25">Age: {{ age }}h1>
13             <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}h1>
14         div>
15     body>
16     <script src="vue.min.js">script>
17     <script>
18         
19         var vm = new Vue({
20             el: '#app',
21             data: {
22                 yes: true,//显示
23                 no: false,//不显示
24                 age: 28,//显示
25                 name: 'keepfool jack' //显示
26             }
27         })
28     script>
29 html>

4.v-show：也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML（但是使用v-if指令的元素如果表达式为假，则不会被渲染到HTML页面，这里要注意v-if和v-show的这个区别），它只是简单地为元素设置CSS的style属性。

5.？？不同Vue版本中v-else的不同。

笔头写作

AI为论文写作赋能，协助你从0到1。

下载

立即学习“前端免费学习笔记（深入）”；

6.v-for

 1 DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>title>
 7     head>
 8 
 9     <body>
10         <div id="app">
11             <table>
12                 <thead>
13                     <tr>
14                         <th>Nameth>
15                         <th>Ageth>
16                         <th>Sexth>
17                     tr>
18                 thead>
19                 <tbody>
20                     <tr v-for="person in people">
21                         <td>{{ person.name  }}td>
22                         <td>{{ person.age  }}td>
23                         <td>{{ person.sex  }}td>
24                     tr>
25                 tbody>
26             table>
27         div>
28     body>
29     <script src="vue.min.js">script>
30     <script>
31         var vm = new Vue({
32             el: '#app',
33             data: {
34                 people: [{
35                     name: 'Jack',
36                     age: 30,
37                     sex: 'Male'
38                 }, {
39                     name: 'Bill',
40                     age: 26,
41                     sex: 'Male'
42                 }, {
43                     name: 'Tracy',
44                     age: 22,
45                     sex: 'Female'
46                 }, {
47                     name: 'Chris',
48                     age: 36,
49                     sex: 'Male'
50                 }]
51             }
52         })
53     script>
54 
55 html>