Vue

vue.js快速入门

发布于 2019-09-02 08:54:58

1 vue.js介绍

1.1、vue.js是什么?

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一 方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。

参考官网:https://cn.vuejs.org/v2/guide/

1.2.vue.js 如何使用

  1. 在html页面使用script引入vue.js的库即可使用。
  2. 使用Npm管理依赖,使用webpack打包工具对vue.js应用打包。 大型应用推荐此方案。
  3. Vue-CLI脚手架 使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形。

1.3. 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页面中引用组件,这个功能非常适合构建大型应用。

1.4. MVVM模式

vue.js是一个MVVM的框架,理解MVVM有利于学习vue.js。 MVVM拆分解释为:

  • Model:负责数据存储
  • View:负责页面展示
  • View Model:负责业务逻辑处理(比如Ajax请求等),对数据进行加工后交给视图展示

MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离,使各自的职责更加清晰,后期代码维护更加简单

2 入门程序

1.新建vue_01.html文件,引入vue.min.js(Vue.js的类库)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试程序</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <!--实现在body区域内显示一个申来来的名称-->
<div id="app">
    {{name}} <!--相当于MVVM的view视图-->
</div>

</body>
<script>
    // 编写MVVM中的model部分及VM(ViewModel)部分
    var VM = new Vue({
        el:'#app',  // vm接管了app区域的管理
        data:{   // model数据
            name:'问了么'
        }
    });

</script>
</html>

运行结果:浏览器显示 问了么

2. v-model指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令的测试</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="num1" >+
    <input type="text" v-model="num2">=
    {{Number.parseInt(num1)+Number.parseInt(num2)}}
    <button >计算</button>
</div>

</body>
<script>
    // 编写MVVM中的model部分及VM(ViewModel)部分
    var VM = new Vue({
        el:'#app',  // vm接管了app区域的管理
        data:{   // model数据
            num1:1,
            num2:1,
        }
    });
</script>
</html>

(1) 在表单控件或者组件上创建双向绑定
(2) v-model仅能在如下元素中使用:

  • input
  • select
  • textarea
  • components(Vue中的组件)

3. v-text

上面的代码,网速慢,未先加载Vue类库的时候,会出现插值闪烁的问题

image.png

用v-text

<span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>

即可解决

ps: 解决插值表达式闪烁问题,使用v-text v-text可以将一个变量的值渲染到指定的元素中,它可以解决插值表达式闪烁的问题

4.v-on 绑定一个按钮的单击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令的测试</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="num1" >+
    <input type="text" v-model="num2">=
    <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>
    <button v-on:click="change">计算</button>
</div>

</body>
<script>
    // 编写MVVM中的model部分及VM(ViewModel)部分
    var VM = new Vue({
        el:'#app',  // vm接管了app区域的管理
        data:{   // model数据
            num1:0,
            num2:0,
            result:0
        },
        methods:{
            change:function () {
                this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)
                alert("结果等于"+this.result)
            }
        }
    });

</script>
</html>

4. 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>

贴代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令的测试</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <!--实现在body区域内显示一个申来来的名称-->
<div id="app">
    <a :href="url">v_bind测试</a>
    <a v-bind:href="url">v_bind测试</a>
    <div :style="{ fontSize: size + 'px' }">问了么</div>
    <div v-bind:style="{ fontSize: size + 'px' }">问了么</div>

</div>

</body>
<script>
    // 编写MVVM中的model部分及VM(ViewModel)部分
    var VM = new Vue({
        el:'#app',  // vm接管了app区域的管理
        data:{   // model数据
          url:"http://java3.cn/",
          size:33
        }
    });

</script>
</html>

v-if和v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令的测试</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <!--遍历list数组-->
        <li v-for="(item,index) in list":key="index" >数组的下标为:{{index}}--内容:{{item}}</li>
        </br>
        <!--只显示下标为偶数的-->
        <li v-for="(item,index) in list":key="index" v-if="index %2 == 0">数组的下标为:{{index}}--内容:{{item}}</li>
        </br>
        <!--遍历JSON-->
        <li v-for="(value,key) in user":key="key"> {{key}}--{{value}}</li>
        </br>
        <!--遍历userlist集合-->
        <li v-for="(item,index) in userlist":key="item.user.uname">
            下标:{{index}}--{{item.user.uname}}--{{item.user.age}}
        </li>
        </br>
        <!---->
        <li v-for="(item,index) in userlist":key="item.user.uname">
            <div v-if="item.user.uname=='问了么'" style="color: #00a0e9">
                {{index}}--{{item.user.uname}}--{{item.user.age}}
            </div>
            <div v-else>
                {{index}}--{{item.user.uname}}--{{item.user.age}}
            </div>

        </li>
    </ul>

</div>

</body>
<script>
    // 编写MVVM中的model部分及VM(ViewModel)部分
    var VM = new Vue({
        el:'#app',  // vm接管了app区域的管理
        data:{   // model数据
          list:[1,2,3,4,5],
            user:{uname:"问了么",age:1},
            userlist:[
                {user:{uname:'问了么',age:19}},
                {user:{uname:'问答社区',age:19}}
            ]
        }
    });

</script>
</html>

显示效果:

image.png

0 条评论

发布
问题