vue.js是基于javascript吗?

vue.js是一套用于构建用户界面的渐进式JavaScript框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue官网介绍

vue是渐进式JavaScript框架

“渐进式框架”和“自底向上增量开发的设计”是Vue开发的两个概念

Vue可以在任意其他类型的项目中使用,使用成本较低,更灵活,主张较弱,在Vue的项目中也可以轻松融汇其他的技术来开发,并且因为Vue的生态系统特别庞大,可以找到基本所有类型的工具在vue项目中使用

特点:易用(使用成本低),灵活(生态系统完善,适用于任何规模的项目),高效(体积小,优化好,性能好)

Vue是一个MVVM的js框架,但是,Vue 的核心库只关注视图层,开发者关注的只是m-v的映射关系

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

使用

1、引入vue.js,可以去网上下载,也可以把内容复制到本地的js文件中

<!-- 引入 vue.js -->
<script src="vue.js"></script>

2、创建Vue对象

var vue = new Vue({
    el: 视图对应的标签
    data: 模型数据
    methods:{
        方法1:function(){},
        方法2:funciton(){},
        ...
    }
});

3、展示模型数据

两标签之间的普通文字,要从模型中获取数据,语法使用 {{模型数据的名称}}

标签的属性需要从模型中获取值:v-bind:属性名 (v-bind 绑定指令),也可以被简化为 :属性名

例子如下,绑定图片属性,获得图片地址:

<!-- 视图 -->
<div id="app">
    <!-- 给文本赋值 用  {{模型变量名}}-->
    <h1>姓名:{{name}}, 年龄: {{age}}, 图片 {{photo}}</h1>
    <!--  给属性赋值需要用 v-bind 指令 -->
    <img v-bind:src="photo">
</div>
<script>
// el -> element
var vue = new Vue({
    el: '#app', /*vue 对象对应的视图是id为app的标签*/
    data: { /*data 中包含的是模型数据*/
        name:'zhangsan',
        age: 18,
        photo: '2_1.bmp'
    }
});
</script>

vue的一些常用指令

1、v-for 用来遍历一个集合

v-for="(临时变量名,下标变量) in 集合名" 其中下标变量从0开始

2、v-if

用来进行条件判断,当条件成立,才会渲染视图,如果条件不成立,不会生成html代码

例子如下,因为hasError后面是false,所以不会输出用户名不正确这一行字:

<div id="app">
    <h3 v-if="hasError">用户名不正确</h3>
</div>

<script>
var vue = new Vue({
    el:"#app",
    data:{
        hasError:false /*没有错误*/
    }
});
</script>

3、v-show

用来进行条件判断,当条件成立(true),把此标签显示出来,如果条件不成立(false),会把此标签隐藏起来

如:v-show="hasError" , hasError:false,所以会把此标签隐藏起来

注:这和 v-if 虽然都是可以判断之后让某些东西不显现,但是它们两个还是有 不同之处,v-if 只要不满足条件就不会生成 html 代码,而 v-show 则是生成了 html 代码,只是隐藏了而已。

事件处理

传统方式处理事件,事件名称="函数()" ,如以下

<input type="button" onclick="函数()">

vue 来处理事件 格式:v-on:事件名称 ="方法名",也可以被简化为 @事件名称 ="方法名", 事件名称前不需要再加on了,加v-on,如以下

<input type="button" v-on:click="方法名">
<input type="button" v-on:mouseout="方法名">

如果方法有参数的话就在方法名后面加上括号里面写上参数,如 <input type="button" v-on:click="方法名(12)">,没有参数就直接写方法名

双向绑定 v-model

v-bind 模型数据发生了改变,视图也会重新渲染,模型会影响视图,而反之不行

v-model, 不仅是数据改变影响视图,而且视图改变也会影响数据,尤其配合表单使用

代码演示

v-bind和语法使用 {{模型数据的名称}}的使用

<!DOCTYPE html>
<html>
<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>Document</title>
    <!-- 引入 vue.js -->
    <script src="vue.js"></script>
</head>
<body>
    <!-- 视图 -->
    <div id="app">
        <!-- 给文本赋值 用  {{模型变量名}}-->
        <h1>姓名:{{name}}, 年龄: {{age}}, 图片 {{photo}}</h1>

        <!--  给属性赋值需要用 v-bind 指令 -->
        <img v-bind:src="photo">
        <img :src="photo">
    </div>

    {{name}}


    <script>
    // el -> element
    var vue = new Vue({
        el: '#app', /*vue 对象对应的视图是id为app的标签*/
        data: { /*data 中包含的是模型数据*/
            name:'zhangsan',
            age: 18,
            photo: '2_1.bmp'
        }
    });
    </script>
</body>
</html>

更多web前端自学相关知识,请查阅 HTML中文网 !!

以上就是vue.js是基于javascript吗?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏