设为首页 加入收藏

TOP

Vue(1)(一)
2017-10-11 13:56:21 】 浏览:4988
Tags:Vue

1.

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>vuetest</title>
 6         <script type="text/java script" src="vue.min.js"></script>
 7     </head>
 8     <body>
 9       <!-- view -->
10       <div id="vue_id">
11         {{message}}  <!--文本插值,使用一对大括号语法,在运行时{{ message }}会被数据对象的message属性替换-->
12         <br>
13         {{age}}
14       </div>
15 
16       <!-- model -->
17       <script type="text/java script">
18         var text={
19           message:"Hello World!",
20           age:16
21         }
22 
23         // 创建一个Vue,;连接view和Model
24         new Vue({
25           el:"#vue_id",//该Vue实例将挂载到<div id="app">...</div>这个元素
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>vuetest</title>
 6         <script type="text/java script" src="vue.min.js"></script>
 7     </head>
 8     <body>
 9       <!-- view -->
10       <div id="app">
11         <p>{{message}}</p>
12         <input type="text" name="" v-model="message"><!--在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。更改input的内容,p标签的内容也同时变化,在浏览器控制台中更改exampleData.message的值,input文本框的内容也会发生变化。-->
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><!-- v-if是条件渲染指令,它根据表达式的真假来删除和插入元素 -->
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><!-- indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 -->
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的不同。

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>Name</th>
15                         <th>Age</th>
16                         <th>Sex</th>
17                     </tr>
18                 </thead>
19                 <tbody>
20                     <tr v-for="person in people"><!-- v-for指令基于一个数组渲染一个列表,它和java scrip
首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇纯css实现div中未知尺寸图片的垂.. 下一篇YJ智能框架--JS判断浏览器类型及..

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

最新文章

热门文章

C 语言

C++基础

windows编程基础

linux编程基础

C/C++面试题目