vue初学第一天

公告

Posted on 2020-10-09 20:46 lhc1994 阅读(124) 评论(2) 收藏举报

1.vue的介绍

作者介绍：尤雨溪是Vue.js框架的作者

框架的介绍：渐进式JavaScript 框架

2.vue官网

https://cn.vuejs.org/

3.vue的优点

易用，灵活，高效

4.库与框架区别

库：只具有某一种功能例子：jquery

框架：具备完整的功能例子：bootstrap element-ui

5.开发环境与生产环境

开发环境地址:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境地址:<script src="https://cdn.jsdelivr.net/npm/vue"></script>

6.vue特点

数据驱动组件化单页面应用轻量级框架简单易学双向数据绑定视图,数据,结构分离虚拟DOM 运行速度更快

7.vue中指令(text)

v-text:与原生的innerText一致，只识别字符串

v-html:与原生的innerHTML一致，可以识别标签

8.vue中指令与插值的使用

插值表达式后面的内容会展示

通过指令绑定元素之间的内容不会显示

9.vue中指令（v-if）

v-if v-else-if v-else 如果......否则......

`10.vue`中的指令(v-show)

两者区别:

1. v-if是动态的向dom树中添加、删除元素v-

v-show通过设置css样式来实现

2. v-if是真实创建其具有惰性，如果初始值是false则不会渲染,同时也不会被缓存

v-show:无论初始值是否真假都会先渲染

总结:如果需要频繁切换需要用v-show

11.vue中的方法使用(v-on 绑定事件)

<body>
    <div id="app">
            <div @click = 'alertName'>点击实现效果</div>
            <div @click = 'alertName2("张三")'>点击实现效果</div>
            <div @click = 'num++'>点击实现效果</div>
            {{num}}
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            name:'李四',
            num:0
        },
        methods: {
            alertName(){
                alert(this.name)
            },
            alertName2(name){
                alert(name)
            }
        },
    })
</script>

注意：v-on:click='方法名' 可以简写为:@click='方法名'

1.绑定事件的另种方式：a.直接写方法名 b.直接写表达式(一般常用简单的表达式)

12.v-for(循环数组)

<body>
    <div id="app">
        <span v-for='item in arr'>{{item}}</span>
        <p v-for='(item,index) in arr'>{{index}}-----{{item}}</p>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
           arr:['苹果','香蕉','橘子','榴莲']
        },
        methods: {
           
        },
    })
</script>

注意点: v-for 循环数组可以传递2个参数，第一个是数组的每一项，第二个是数组的索引

13.v-for(循环对象)

<body>
    <div id="app">
        <span v-for='item in objs'>{{item}}</span>
        <p v-for='(value,key,index) in objs'>{{key}}-----{{value}}-------{{index}}</p>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
          objs:{
              '水果':'苹果，香蕉，橘子',
              '蔬菜':'小白菜，土豆，芹菜'
          }
        },
        methods: {
           
        },
    })
</script>

注意：循环对象的时候，传递三个参数，分别代表value，key，index 位置不可以更换

14.v-bind（绑定属性）

<body>
    <div id="app">
        <!-- v-bind:msg 这是自定义指令，只能在元素中查看，可以作为某一项操作的标识 -->
        <a v-bind:href="href" v-bind:title="title" v-bind:msg='msg'>点击跳转</a>
        <a :href="href" :title="title"  :msg='msg'>点击跳转</a>
        <!-- <img src="" alt=""> -->
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            href:'https://www.baidu.com',
            title:'我是标题1111',
            msg:'hello'
        },
        methods: {

        },
    })
</script>

注意：v-bind:title='abc' 可以简写为 :title:'abc'

15.v-model (双向数据绑定)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model = "msg">
        <span>{{msg}}</span>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"hello"
        }
    })
</script>
</html>

16.动态绑定样式class

<body>
    <div id="app">
        <!-- 这是普通的添加样式 -->
      <div class="box">我是普通样式渲染</div>
      <!-- 通过绑定类名的方式 -->
      <div :class="className">我是第一种样式渲染</div>
      <!-- 通过对象的方式 -->
      <div :class="objClass">我是第二种样式渲染</div>
      <!-- 通过三元表达式 -->
      <div :class="[1==1?'blue':'yellow']">我是第三种样式渲染</div>
      <!-- 通过拼接实现 -->
      <div :class='"yellow " + font'>我是第四种样式渲染</div>
      <div :class='"yellow " + "font"'>我是第四种样式渲染</div>
      <!-- <div class="pink font"></div> -->
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
           className:'pink',
           objClass:{
                'orange':true,
                'font':true,
           },
           font:'font'
        },
        methods: {
           
        },
    })
</script>

注意：普通情况用第一种和普通绑定即可，如果后期需要动态添加那么就需要用到第四种

17.动态绑定style

<body>
    <div id="app">
        <!-- 普通的通过style绑定 -->
       <div :style="{background:bgcolor,color:color}">我是通过style来设置的</div>
       <!-- 通过对象的方式绑定样式 -->
       <div :style='styleObj'>我是第二种通过style绑定</div>
        <!-- 通过数组的方式绑定多个样式 -->
       <div :style='[styleA,styleB]'>我是第三种通过style绑定</div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            bgcolor:'#000000',
            color:'#ffffff',
            styleObj:{
                fontSize:'40px',
                color:'red',
                background:'yellow'
            },
            styleA:{
                color:'green',
            },
            styleB:{
                fontSize:'30px',
            }
        },
        methods: {
           
        },
    })
</script>

注意：如果需要绑定多个样式，需要用对象的方式，如果需要绑定多个类名，需要用数组的方式

18.实际案例（实现简单选项卡）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 300px;
            height: 30PX;
            border: 1px solid red;
        }

        li {
            list-style: none;
            width: 100px;
            height: 30px;
            /* background-color: red; */
            float: left;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
            line-height: 30px;
        }

        .box1 {
            margin-top: 10px;
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        .active{
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in list" :class="{active:index == num}" @click="tab(index)">{{item}}</li>
        </ul>
        <div class="box1" v-for="(item,index) in content" v-show="index == num">{{item}}</div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            list: ["html", "css", "javascript"],
            content: ["html", "css", "javascript"],
            num :0,
        },
        methods: {
            tab(index) {
                this.num = index;
            }
        }
    })
   
</script>

</html>

刷新页面返回顶部

lhc1994

公告