Vue.js基础2

Posted Code_User

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js基础2相关的知识,希望对你有一定的参考价值。

声明式渲染

  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的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 中的片段

VUE.js入门学习-基础精讲

使用 Vue 模板清晰地分离视图和代码

vue.js基础知识篇:表单校验详解

vue.js基础--Hello word!实例

vue.js基础知识篇:过滤器class与style的绑定2