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 如何使用

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

1.3. vue.js有哪些功能？

声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。比如：使用vue.js的插值表达式放在Dom的任意地方，差值表达式的值将被渲染在Dom中。
条件与循环 dom中可以使用vue.js提供的v-if、v-for等标签，方便对数据进行判断、循环。
双向数据绑定 Vue 提供v-model 指令，它可以轻松实现Dom元素和数据对象之间双向绑定，即修改Dom元素中的值自动修改绑定的数据对象，修改数据对象的值自动修改Dom元素中的值。
处理用户输入为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在Vue实例中定义的方法
组件化应用构建 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类库的时候,会出现插值闪烁的问题

用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>

显示效果:

0 条评论

暂无评论，快来发表评论吧

请登录后再发布评论，点击登录

关于作者

baiyang

文章

回答

被采纳

关注TA

发私信

vue-cli启动的项目局域网内无法访问

vue.js快速入门

1 vue.js介绍

1.1、vue.js是什么？

1.2.vue.js 如何使用

1.3. vue.js有哪些功能？

1.4. MVVM模式

2 入门程序

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

2. v-model指令

3. v-text

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

4. v-bind

v-if和v-for

关于作者

baiyang

相关文章

热门问题

热门标签

推荐专家

vue.js快速入门

1 vue.js介绍

1.1、vue.js是什么？

1.2.vue.js 如何使用

1.3. vue.js有哪些功能？

1.4. MVVM模式

2 入门程序

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

2. v-model指令

3. v-text

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

4. v-bind

v-if和v-for

关于作者

baiyang

相关文章

热门文章

热门问题

热门标签

等待解答

推荐专家

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