vue.js功能学习

Posted 希望不秃也能变强

tags:

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

vue.js是一个MVVM的框架,理解MVVM有利于学习vue.js。

  •   MVVM 拆分解释为:
    •  Model: 负责数据存储
    •  View: 负责页面展示
    •  View Model: 负责业务逻辑处理(比如Ajax请求等),对数据进行加工后交给视图展示
  •   MVVM 要解决的问题是将业务逻辑代码与视图代码进行完全分离,使各自的职责更加清晰,后期代码维护更加简单
  •        用图解的形式分析 Ajax请求回来数据后直接操作Dom来达到视图的更新的缺点,以及使用MVVM模式是如何来解决这个缺点的
  •   Vue 中的 MVVM

 

 

 


vue.js有哪些功能?
1)声明式渲染
  Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
  比如:使用vue.js的插值表达式放在Dom的任意地方, 差值表达式的值将被渲染在Dom中。
2)条件与循环
  dom中可以使用vue.js提供的v-if、v-for等标签,方便对数据进行判断、循环。
3)双向数据绑定
  Vue 提供v-model 指令,它可以轻松实现Dom元素和数据对象之间双向绑定,即修改Dom元素中的值自动修改绑定的数据对象,修改数据对象的值自动修改Dom元素中的值。
4)处理用户输入
  为了让用户和你的应用进行交互,我们可以用 v -on 指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法
5)组件化应用构建
  vue.js可以定义一个一个的组件,在vue页面中引用组件,这个功能非常适合构建大型应用。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue小demo</title>
</head>
<body>

    <div id="app">
        <!-- v-text:可以将一个变量的值渲染到指定的元素中,它可以解决插值表达式闪烁的问题(该问题可由网速引起,可在浏览器控制器中设置presets slow 3G) -->
        <span v-text="name"></span></br>

        <!-- v-model: 实现双向数据绑定-->
        <input type="test" v-model="num1"> + 
        <input type="test" v-model="num2"> =                         
       
        <span v-text="result"></span>

        <!-- v-on: 监听用户事件 -->
        <button v-on:click="cal">计算</button></br>

        =====================================================

        <!-- v-for: 一个参数就直接是值,两个参数的第二个参数则为索引 -->
        遍历数组:
        <ul>
            <li v-for="(item,index) in nums">{{index}} ---> {{item}}</li>
        </ul>

        遍历单个json对象(对象的属性遍历):
        <ul>
            <li  v-for="(value,key) in user">{{key}} : {{value}}</li>
        </ul>

        遍历多个json对象(对象的属性遍历):
        <ul>
            <li  v-for="(item,index) in users" v-if="item.user.name==\'波多\'" style="color: red;font-size: 33px;">{{index}} : {{item.user.name}}</li>
            <!-- v-bind:
            1、作用:
                v‐bind可以将数据对象绑定在dom的任意属性中。
                v‐bind可以给dom对象绑定一个或多个特性,例如动态绑定style和class   
 
              2、举例:
                  <img v‐bind:src="imageSrc">  
                  <div v‐bind:style="{ fontSize: size + \'px\' }"></div>
            
              3、缩写形式
                  <img :src="imageSrc">
                  <div :style="{ fontSize: size + \'px\' }"></div>
            -->
            <li v-else v-bind:style="{color:col}">{{index}} : {{item.user.name}}</li>
        </ul>

    </div>

</body>
<!-- 引入VUE.js类库 -->
<script src="vue.min.js"></script>
<script>
 var VM = new Vue({
    el:"#app",// vm接管了app区域的管理
    data:{
        name:"双向数据绑定小测试",
        num1:1,
        num2:1,
        result:2,
        nums:[1,3,5,7,9],
        user:{name:"加藤",age:25},
        users:[
            {user:{name:"加藤",age:25}},
            {user:{name:"波多",age:24}}
            ],
        col:"blue"
        },
    methods:{
        cal:function(){
            this.result=Number.parseInt(this.num1)+Number.parseInt(this.num2)
        }
    }
 })
   
</script>

</html>

 

以上是关于vue.js功能学习的主要内容,如果未能解决你的问题,请参考以下文章

Vue组件之全局组件与局部组件

Vue组件之全局组件与局部组件

IOS开发-OC学习-常用功能代码片段整理

Vue.js 中的片段

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中

Vue组件学习(转载)