Vue学习 

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title>vue练习</title>
 6     
 7 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
 8 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9   </head>
10   <body>     
11 <div id="app" >    
12     <p v-if="show">是否可以显示</p>
13     <button v-on:click="btclick">点击</button>
14     <ul><li v-for="item,index of list" key="index">{{item}}</li></ul>
15 </div>
16   </body>
17   <script type="text/javascript">
18    var app=new Vue({
19        el:'#app',
20        data:{
21            show:true,
22            list:[1,2,3,4,'青青子衿悠悠我心'],          
23        },
24        methods:{
25            btclick:function(){
26                this.show=!this.show;
27            }
28        }
29    })
30   </script>
31   </html>
<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
 1 <div id="app">
 2     <p>{{ message }}</p>
 3     <input v-model="message">
 4 </div>
 5     
 6 <script>
 7 new Vue({
 8   el: '#app',
 9   data: {
10     message: 'Runoob!'
11   }
12 })
13 </script>

v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title>vue练习</title>
 6     
 7 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
 8 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9   </head>
10   <body>     
11 <div id="app">
12   {{ message | capitalize }}
13 </div>
14 
15   </body>
16   <script type="text/javascript">
17   new Vue({
18   el: '#app',
19   data: {
20     message: '288'
21   },
22   filters: {
23     capitalize: function (value) {
24       if (value<200) return 'HH'
25       return value
26     }
27   }
28 })
29   </script>
30   </html>

Vue.js 为两个最为常用的指令提供了特别的缩写：

v-bind 缩写  

v-on 缩写

1 <div id="app" >
2     <a v-bind:href="url">菜鸟教程</a>
3 </div>
1 <!-- 完整语法 -->
2 <a v-bind:href="url"></a>
3 <!-- 缩写 -->
4 <a :href="url"></a>
1 <!-- 完整语法 -->
2 <a v-on:click="doSomething"></a>
3 <!-- 缩写 -->
4 <a @click="doSomething"></a>

 条件判断语句

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title>vue练习</title>
 6     
 7 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
 8 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9   </head>
10   <body>     
11 <div id="app" >
12     <div v-if="type==='a'">是A啊！</div>
13     <div v-else-if="type==='b'">是B啊！</div>
14     <div v-else-if="type==='c'">是C啊！</div>
15     <DIV v-else>什么都不是啊</DIV>
16 </div>
17 
18   </body>
19   <script type="text/javascript">
20   new Vue({
21       el:'#app',
22       data:{
23           type:'www'
24       }
25       
26   })
27   </script>
28   </html>
View Code

 

v-show

我们也可以使用 v-show 指令来根据条件展示元素：

v-show 指令

 1 <h1 v-show="ok">Hello!</h1> 
posted @ 2018-12-13 15:51  L1230205  阅读(122)  评论(0)  编辑  收藏  举报