首页 > 代码库 > Vue.js基础2

Vue.js基础2

2024-10-23 03:07:41   212人阅读

声明式渲染

　　Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM：　

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: ‘#app‘,
  data: {
    message: ‘Hello Vue!‘
  }
})

　　我们已经生成了我们的第一个 Vue 应用！看起来这跟单单渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起，所有的元素都是响应式的。我们如何知道？打开你的浏览器的控制台（就在这个页面打开），并修改 app.message，你将看到上例相应地更新。

条件与循环

　　控制切换一个元素的显示也相当简单：　　

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
  el: ‘#app-3‘,
  data: {
    seen: true
  }
})　　

　　继续在控制台设置 app3.seen = false，你会发现 “现在你看到我了” 消失了。

　　这个例子演示了我们不仅可以绑定 DOM 文本到数据，也可以绑定 DOM 结构到数据。而且，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/删除元素时自动应用过渡效果。

　　v-for 指令可以绑定数组的数据来渲染一个项目列表：

　　　　　<div id="div">
            <ul>
                <li v-for="item in arr">{{item}} {{$index}}</li>
            </ul>
        </div>
　　　　　　　　　new Vue({
                    el:"#div",//id名     el:element
                    data:{
                        arr:[1,2,3,4,5]//展示的数据
                    }
                })

　　

　　另一种书写的方式：

<ul>
     <li v-for="(key,value) in json">{{$index}} {{key}} {{value}}</li>
</ul>
new Vue({
    el:"#div",//id名     el:element
    data:{
         json:{
         　　a:123,
         　　b:3454,
         　　c:‘werwer‘,
         　　d:4645645
         }
    }
})

　　

　　过滤器

<div id="div">
    {{iNum | currency ‘￥‘}}<br /> 
    {{str1 | capitalize}}<br />
    {{str2 | uppercase}}<br />
    {{str3 | lowercase}}<br />
    {{arr | limitBy 3}}
 </div>

 

new Vue({
    el:"#div",//id名     el:element
    data:{
        iNum:123456789,//货币符号过滤器
        str1:‘welcome to vue‘,//首字母大写
        str2:"welcome to vue",//全部大写
        str3:‘WELCOME TO VUE‘, //全部小写
        arr:[1,2,3,4,5,6]
    }
})

 

　　明天继续啦。。。。。。

 

Vue.js基础2


联系
我们