首页 > 其他 > 详细

VUE基础简介

时间:2019-10-08 20:32:33      阅读:82      评论:0      收藏:0      [点我收藏+]

一:基础简介

(1)前段框架简介

(1)angular:

  (1)由Facebook开发 适用于大型项目

(2)react:

  (1)由GitHub公司开发

(3)Vue:

  (1)由中国人尤雨溪开发 吸取了angular与react的优点

(2)Vue框架的优点

(1)轻量级:该框架大小比较小

(2)中文API:由于是中国人开发 操作文档全是中文 对中国人比较友好

(3)数据驱动:DOM元素让DOM文档随着数据的变化而变化

(4)双向绑定:数据层与视图层的同步 当写入数据的时候 视图层跟着发生变化

(5)MVVM的设计模式:将前段与后端分离出来

(6)组件化开发:HTML + CSS + JS协同开发

(7)单页面的应用:为手机节约内存等

(3)渐进式框架:

(1)其可以控制一个标签 一个页面 甚至一个项目

(4)Vue的导入方式

<script src="statict/vue.js"></script>  // 本地直接导入
<script src="https://cn.vuejs.org/js/vue.min.js"></script>  // cdn 导入

二:实例成员 --- 挂载点

(1)作用:

  (1)与HTML页面进行关联

  (2)html与body不能作为挂载点

  (3)一个vue挂载点之匹配一个结果 因此一般VUE挂载点都使用id

技术分享图片
<body>
<div id="wrap">
    {{ }}
    <hr>
    <div class="main">

    </div>
    <hr>
    <div class="main">
        {{ }}
    </div>
</div>
</body>
<script>
<!--    生成一个vue对象-->
    new Vue({
        // el: ‘.main‘  // 与main进行挂载 最下面的main不会被挂载
        el:#wrap    // 与wrap进行挂载 所有的被挂载点都会消失
    })

</script>
挂载点示例

(2)JS对象(字典)小特性

<script>
    let age = 18;
    let user_info = {
        user:‘SR‘,   // 当字典内部的key都是字符串的时候 key中引号可以省略不写
        age         // 当key中的值为变量的时候 且值与key同名 则值可以不写  age:age
    };
    // age: 18
    // user: "SR"
    console.log(user_info)
</script>

 三:实例成员 --- 数据

(1)在vue实例中通过data添加数据

技术分享图片
<div id="app">
    <!--插值式获取值-->
    <p>{{age}}</p>
    <p>{{name}}</p>
    <p>{{address}}</p>
</div>

</body>
<script>
    new Vue({
        el:‘#app‘,
        data:{  // 通过data为挂载点添加数据
            age:18,
            name:‘SR‘,
            address:‘China‘,
        }
    })
</script>
数据实例

(2)通过插值式获取值

    <!--插值式获取值-->
    <p>{{age}}</p>
    <p>{{name}}</p>
    <p>{{address}}</p>

(3)变量接收vue生成的对象 通过变量名访问内部属性(内部属性都是以$开头)

技术分享图片
<script>
    let app = new Vue({  // 变量接收 实例化产生的对象
        el:‘#app‘,
        data:{  // 通过data为挂载点添加数据
            age:18,
            name:‘SR‘,
            address:‘China‘,
        }
    })
</script>
<script>
    console.log(app);  // 获取一个对象 内部对应的方法属性
    console.log(app.$data.name);  // SR
    console.log(app.$data.age)   // 18
</script>
通过变量获取数据一

(4)直接通过变量名访问内部的属性

<script>
    console.log(app);  // 获取一个对象 内部对应的方法属性
    console.log(app.name);  // SR
    console.log(app.age)   // 18
</script>

四:实例成员 --- 过滤器

(1)作用:过滤器本身就是用来处理函数的 其可以将插值式中的数据作为参数传给函数进行处理 得到的函数返回结果就是函数处理后的结果

(2)使用方式:

{{ ...变量 | 过滤器(...变量) }}

(3)过滤器在实例中由filters提供

技术分享图片
<div id="app">
    <!--    插值表达式中 可以做些简单的运算-->
    <p>{{num + 100}}</p>
    <!--    字符串方法属性-->
    <p>{{msg.split(‘‘)[0]}}</p>
    <!--    调用过滤器f1-->
    <p>{{num|f1}}</p>
    <!--    该函数传多个参数-->
    <p>{{ 10, 20, 30, 40 | f2 }}</p>

    <!--    给函数括号内传递两个产生-->
    <p>{{ 10, 20 | f2(50, 80) }}</p>
    <!--    传递参数不够 返回Nan-->
    <p>{{ 120 | f2 }}</p>
<!--    函数内部传参过多 网页报错-->
    <p>{{ 10, 20, 30, 40,60 | f2 }}</p>
</div>
</body>
<script>
    let app = new Vue({
        el: ‘#app‘,
        data: {
            num: 100,
            msg: ‘消息提示框‘
        },
        filters: {
            f1: function (num) {
                return num * 2
            },
            f2: function (a, b, c, d) {
                return a + b + c + d
            }
        }

    })
</script>
过滤器

 

VUE基础简介

原文:https://www.cnblogs.com/SR-Program/p/11637484.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!