大学生开启学习VUE2.0(1)vue简介和基本用法

最新推荐文章于 2024-05-07 02:51:38 发布

今天也在努力学

最新推荐文章于 2024-05-07 02:51:38 发布

阅读量211

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/m0_62927182/article/details/125070205

版权

1.Vue简介

1.1 概念

渐进式 JavaScript 框架（渐进式: 可大可小,可简单可复杂,小到可当做一个插件使用,大到可搭建一个完整项目）

插件: 语法简单,功能单一,不能独立使用,要导入项目使用,一般用于实现一个小功能, 例如: swiper.js、animate.css、 echarts.js

语法库: 语法较多, 功能多样, 是很多小功能的集合, 不能独立使用, 需要结合项目使用, 例如 jquery.js

框架: 语法较多, 功能多样, 是很多小功能的集合, 可以单独使用, 可用于构建一个项目, 例如 layui, vue, react

SDK: 软件开发工具包常用于手机移动开发, 提供一整套模块化功能, 例如:百度地图SDK , 腾讯客服SDK

2.基本用法

2.1 属性绑定记得引入 vue.js

<style>
    .color {
        color: red;
    }
    .border {
        border: 1px solid yellow;
    }
    .font {
        font-size: 20px;
    }
</style>
<body>
    <div id="app">
        <p v-bind:id="msg">  
            通过v-bind进行属性绑定id字段 
        </p>
        <p :class="c1">如果绑定的是字符串，字符串就是类名</p>
        <input type="checkbox" name="style" v-model="arr" value="color">
        <input type="checkbox" name="style" v-model="arr" value="border">
        <input type="checkbox" name="style" v-model="arr" value="font">
           上面的input标签绑定的arr里面的每个组员  在arr数组中呈现有或无
        <p :class="arr">{{arr}}</p>  p标签的class有 color border font 
        <p :class="obj">这是对象类来绑定的</p> p标签的class有color font
        <p :style="obj2">我是 通过对象样式来绑定的</p> p标签的样式绑定
    </div>
</body>
<script src="../../vue.js"></script>
<script>
    var app = new Vue({
        el: '#app', //vue对象和模板进行关联
        data: {
            msg: "data1",
            c1: "color",
            arr: ["color", "border", "font"],
            obj: {
                color: true,
                border: false,
                font: true
            },
            obj2: {
                color: "red",
                "font-size": '100px',
                backgroundColor: "green"
            }
        },
        mounted() {  //生命周期
            console.log("出现了！");
        },
        watch: {   
            //arr改变会触发
            arr(newValue) {
                console.log(this.arr);
            }
        }
    })
</script>

2.2 事件绑定

<body>
    <div id="app">
        <!-- 1.绑定的时候不带小括号，默认把事件对象传递事件函数里面 -->
        <button @click="f1">通过v-on来进行的事件绑定或者@</button>
        <!-- 2.@ -->
        <button @click="f1(2,$event)">带括号传递参数</button>
        <!-- 3.箭头函数 -->
        <button @click="f4">箭头函数</button>
        <!--  -->
        <input type="text" @focus='f5' @blur='f6'>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            name: 'zz'
        },
        obj: {
            name: '33'
        },
        methods: {
            //添加模板里面使用的函数
            f1(i, e) {
                console.log(i + '++++++++');
                console.log(e);
                console.log(event); //内置的事件对象
                console.log(this); //组件对象
                //访问自身data
                console.log(this._data); //不建议采用
                console.log(this.name); //建议这个

            },
            f4: () => {
                console.log(this); //window
            },
            f5(e) {
                e.target.style = "outline:1px solid red"
            },
            f6(e) {
                e.target.style = 'outline:none'
                console.log(e);
            }
        },
    })
</script>

2.3 条件判断

<body>
    <div id="app">
        <p v-if="show">
            v-if如果是true，该标签显示，
 <!-- 显示和隐藏是:显示创建，隐藏删除! 一般切换频繁的不建议用组件v-if，重复创建删除导致性能减低 vue里面对v-if进行处理，如果删除一个组件，把组件进行缓存一份，如果再次通过v-if显示/创建该组件的时候，这个时候从缓存取出组件，再进行显示，通过从缓存找到删除的组件的方式从而提升v-if的效率 -->
        </p>
        <p v-else>v-else和v-if条件相反，v-else显示</p>
        <button @click="changeshow">点击改变</button>

        <input type="text" v-model="score">
        <p v-if="score>=80&& score<=100">very good</p>
        <p v-else-if="score<80&& score>70"> good</p>
        <p v-else-if="score>=60&& score<=70"> low good</p>
        <p v-else> bad</p>
        <p>{{show?"男":"女"}}</p>
        <!-- <p v-show="showup">v-show显示和隐藏组件的指令，通过css样式 display=none来进行元素的显示和隐藏</p> -->
        </div>
</body>
<script src="../../vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true,
            score: 99
        },
        methods: {
            changeshow() {
                this.show = !this.show
            }
        },
    })
</script>

2.4 v-for的使用

<body>
    <div id="app">
        <!-- b 数组元素或者对象 i索引或者关键字 :key属性元素的唯一标识 
        在更新组件的时候根据key值来去找到要更新的组件，从而提升页面渲染的速率-->
        <p v-for="(n,i) in list" :key="i">{{n}}//{{i}} </p>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            list: {
                obj: {
                    name: '你好',
                    age: 25
                },
                id: 1,
                name: "vue从入门到放弃"
            }
        },
    })
</script>

2.5 其他指令

<body>
    <div id="id">
        <!-- 指令修饰符：对一些vue指令，再加上一些限制 -->
        <p>{{count+98}}</p>
        <!-- number:可以把数据转换成数字，一般用在指令后面 -->
        <input type="text" v-model.number="count">
        <input type="text" v-model.number="a">+
        <input type="text" v-model.number="b">={{a}}
        <br>
        <!-- lazy:失去焦点之后触发 trim是卡头去尾去空格 -->
        <input type="text" v-model.lazy.trim="c">
        <p>{{c}}</p>

        <!-- 阻止事件的默认事件， stop是阻止事件冒泡 -->
        <a href="http://www.baidu.com" @click.prevent.stop="f2">百度</a>

        <!-- keydown.b  可以判断按下的按键触发 -->
        <button @keydown.ctrl="f2">
  键盘事件
        </button>

        <!-- 以上是指令修饰符 -->
        <!-- ------------------ -->
        <p>{{msg}}</p>
        <!--  v-html可以解析标签和v-text不可以 -->
        <p v-text="msg"></p>
        <p v-html="msg"></p>
        <!-- v-pre 允许我们在渲染的时候把{{}}当成普通的字符 -->
        <p v-pre>{{你好</p>
        <input type="text" v-model="c">
        <!-- 只允许渲染一次 数据更新了视图不更新 -->
        <p v-once>{{c}}</p>
        <!-- vue在解析插值运算的时候有一个编译的过程，频繁的刷新会出现{{}}闪烁的情况，解决的时候v-cloak -->
        <p v-cloak>{{c}}</p>
        <p v-cloak>{{count}}</p>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    var app = new Vue({
        el: '#id',
        data: {
            count: '98745',
            a: '123a',
            b: 12,
            c: 10,
            msg: "<h1>hello</h1>"
        },
        methods: {
            f2() {
                console.log('f2');
            },
        },
        computed: {

        }
    })
</script>

以上是vue的一些基础用法

下次的内容也是基础