day01 vue安装以及指令的基础使用

最新推荐文章于 2024-01-04 21:16:21 发布

酷哦筱王

最新推荐文章于 2024-01-04 21:16:21 发布

阅读量101

点赞数

本文链接：https://blog.csdn.net/weixin_52516275/article/details/110295470

版权

day01 vue安装以及指令的基础使用

一、vue介绍

**官网：**https://cn.vuejs.org/

1.vue特点：易用，灵活，高效

2.渐进式：根据需求的不同加载不同模块

库和框架的区别：

**库：**jq …js 功能单一

**框架:**vue react angular

3.vue核心：数据驱动、组件化

4.vue安装

**a.**cdn方式需要引入的开发版本

**b.**npm install vue

**c.**直接下载vue.js

5.实例化Vue对象

在使用Vue.js时都是通过构造函数Vue()创建一个Vue实例，来初始化数据、绑定数据和事件的

选项对象包括挂载元素（el）、数据（data）、方法（methods）、模板（template）、生命周期钩子函数等选项

6、插值表达式胡子语法： {{变量名/函数名/表达式}}

缺点： 刷新是会有闪烁

 <body>
    <div id="app">
        <!-- 会有闪烁 -->
        <p>{{name}}</p>
        <p>{{sum(1,2)}}</p>
        <p>{{2+3}}</p>
    </div>
</body>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                name:'张三', 
            },
            methods: {
                sum(a,b){
                    return a+b;
                }
            }
        })
    </script>

二、指令

1.v-text/v-html ：输出指定内容

<body>
    <!-- 2.挂载元素 -->
    <div id="app">
        <!-- 插值表达式 胡子语法 -->
        {{name}}
        <!-- {{a}} 这是没有声明错误的 -->
        <!-- 解决双括号闪烁问题 通过指令-->
        <div v-html='name'></div>
        <div v-text='name'></div>

        <hr>
        <div v-html='text'></div>
        <div v-text='text'></div>
    </div>

</body> 
<script src="./vue.js"></script>
<script>
    // 3.创建关联 Vue
    // 对象;属性和方法
    // 1.所有需要往页面渲染的属性都需要在data中声明
    new Vue({
    
        el:'#app', //element 元素，
        data:{
            name:'张三',
            text:'<p>我是测试的内容</p>'
        },
        methods: {
            sun(a,b){
                return a+b 
            }
        },
    })

    // 总结：1.v-html,v-text  v-html识别标签，v-text不识别标签
    
</script>

2、 v-if、v-show ：

隐藏或显示元素，值为true时显示，值为false时隐藏

v-if =false 相当于visibility:hidden; 相应的元素也会从DOM中移除

v-show =false 相当于 display:none;

**应用场景：**如果频繁切换元素需要用v-show

<body>
    <!-- 2.挂载元素 -->
    <div id="app">
        <div v-if='false'>我是要显示的元素111</div>
        <div v-if='isShow'>我是要显示的元素2222</div>
        <hr>
        <div v-show='false'>我是通过另外一种方式显示隐藏元素</div>
    </div>

</body>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app', //element 元素，
        data: {
            name: '张三',
            isShow:true,
        },
        methods: {
        },
    })

    // v-if,v-show  v-if:直接移除元素   v-show:通过display：none来设置元素  应用场景：如果频繁切换元素需要用v-show 
</script>

3.v-if 、v-else-if 、v-else ：

<body>
    <!-- 2.挂载元素 -->
    <div id="app">
        <div v-if='num>5'>大于5</div>
        <div v-else-if='num==5'>等于5</div>
        <div v-else>小于5</div>
        <hr>

        <div>我是中间内容</div>
        // 注意：v-if  v-else  中间不允许有内容  
        <div v-else>我是测试隐藏的</div>
    </div>

</body>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app', //element 元素，
        data: {
            num:10
        },
        methods: {
        },
    })

4、v-for: 根据一组数据的内容进行遍历渲染

**item:**项 **index：**下标 **key:**键名

（1）遍历数组 : v-for=’(item,index) in 数组名’

**（2）遍历对象：**v-for=’(item,key,index) in 对象名’

<body>
    <!-- 2.挂载元素 -->
    <div id="app">
       //遍历数组
       <div v-for='(item,index) in arr'>{{item}}------{{index}}</div>
        <hr>
        //遍历对象
        <p v-for='(item,key,index) in obj'>{{item}}----{{key}}----{{index}} </p>
    </div>

</body>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app', //element 元素，
        data: {
            arr:['苹果','香蕉','橘子'],
            obj:{name:'张三',age:20}
        },
        methods: {
        },
    })
</script>

例子：九九乘法表

<body>
    <div id="app">
         <div v-for='i in arr'>
             <span v-for='j in arr' v-if='i>=j'>{{i}}*{{j}}={{i*j}}&nbsp;</span>
         </div>
    </div>
</body>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app', //element 元素，
        data: {
          arr:[1,2,3,4,5,6,7,8,9]
        },
        methods: {
        },
    })

5、v-bind ：给html标签绑定属性

简写为 :属性名

<body>
    <div id="app">
        <a v-bind:href="url" v-bind:name='aa'>点击跳转到百度</a>
        <!-- v-bind简写: -->
        <div :abc='abc'>我是div</div>
    </div>
</body>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app', //element 元素，
        data: {
            num:10,
            url:'http://www.baidu.com',
            aa:'张三',
            abc:'123'
        },
        methods: {
        },
    })
</script>

6、v-on ：绑定方法

简写方式: @

**【注意】****：**方法名后面的小括号如果没有参数的情况下可以省略

<body>
    <div id="app">
       <button v-on:click='fn'>点击弹出内容</button>
       <!-- v-on：的简写方式:@ -->
       <button @click='fn'>点击弹出内容</button>
    </div>
</body>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app', //element 元素，
        data: {
        },
        methods: {
           fn(){
               alert(123)
           }
        },
    })
    // v-on： 注意：方法名后面的小括号如果没有参数的情况下可以省略

例子：选项卡

<style>
        .box{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <button v-for="(item, index) in arr" @click='change(index)' :class='[item.isshow?"box":" "]'>{{item.tab}}</button> -->
        <button v-for="(item, index) in arr" @click='change(index)' :class='[select==index?"box":" "]'>{{item.tab}}</button>
        <div v-for="(item,index) in arr" v-show='item.isshow'>{{item.content}}</div>
    </div>

    <script src="./vue.js"></script>
    <script>
       new Vue({
        el: '#app',
        data: {
            arr:[
                {tab:'选项一',content:'内容一',isshow:true},
                {tab:'选项二',content:'内容二',isshow:false},
                {tab:'选项三',content:'内容三',isshow:false}
            ],
            select : 0
        },
        methods: {
            change(index){
                for(var i=0; i<this.arr.length;i++){
                    this.arr[i].isshow = false;
                   
                }
                this.arr[index].isshow = true;
                this.select = index;
            }
        }
        })
    </script>

6、v-model:：数据的双向绑定

【注意】：只能应用于表单元素

<body>
    <div id="app">
        <!-- 视图 view-->
        <div >{{content}}</div>
        <input type="text" v-model='content'>
    </div>
</body>

<script src="./vue.js"></script>
<script>
    new Vue({
        // v-model  只能应用于表单元素
        el: '#app', //element 元素，
        data: {
            // 数据 模型model   M（model）V（view） VM(viewModel)   
           content:'我是div1'
        },
        methods: {
        },
    })
</script>

三、绑定样式

1、:class 方式绑定:

【注意】：复合绑定时要在新添加的类名之前加空格

<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .div3{
            color:blue;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 基础绑定样式 -->
       <div class="box div3">我是div</div>
       <!-- 通过绑定属性的方式 -->
       <div :class='box'>我是div2</div>
       <!-- 通过三元方式添加样式 -->
       <div :class='[1==2?box:div3]'>我是div3</div>
       <!-- 复合样式-->
       <div :class='box+" div3"'>我是div4</div>
    </div>
</body>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            box:'box',
            div3:'div3'
        },
        methods: {
        },
    })
</script>

2、:style 方式绑定:

同时加多组样式时使用数组

带连字符-的要使用驼峰标识

<body>
    <div id="app">
        <!-- 基础绑定样式 -->
       <div style='width: 100px;height: 100px;background-color: red;'>我是div</div>
       <!-- style的行内样式 -->
       <div :style='obj'>我是div2222</div>
         <!-- 同时加多组样式时使用数组 -->
       <div :style='[obj,obj1]'>我是div33333</div>
    </div>
</body>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app', //element 元素，
        data: {
          obj:{
            width:'100px',
            height:'100px',
            background:'green',
          },
          obj1:{
              color:'yellow',
              fontSize:'40px',
          }
        },
        methods: {
        },
    })
</script>

3. 知识点: :key的作用绑定一个唯一值，避免勾选不正确的问题与v-for的固定搭配

例子：多选框

<body>
    <div id="app">
    //key的作用; 绑定一个唯一值，避免勾选不正确的问题  与v-for的固定搭配
        <div v-for='(item,index) in list' :key='item.id'>
            <input type="checkbox">
           {{index+1}}---- {{item.name}}---{{item.age}}
        </div>
        <div>
            姓名: <input type="text" v-model='user.name'>
        </div>
        <div>
            年龄: <input type="text" v-model='user.age'>
        </div>
        <div>
            <button @click = 'add'>添加</button>
            <button @click = 'reset'>重置</button>
        </div>
    </div>
</body>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app', 
        data: {
            user:{
                name:'张三',
                age:20
            },
            list:[
                {id:1,name:'李四',age:15},
                {id:2,name:'王五',age:25},
                {id:3,name:'赵六',age:35},
            ]
        },
        methods: {
            // 重置数据  this 指的就是vue的实例
            reset(){
               this.user={
                   name:'',
                   age:''
               } 
            },
            // 增加
            add(){
                // this.list.push({id:4,name:'王麻子',age:18})
                let obj = {id:4,name:'王麻子',age:18}
                this.list.splice(2,0,obj)
            }
        },
    })
</script>

四、表格案例

<style>
        tr{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" cellpadding="0" width="500px">
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>
                    <button>删除</button>
                </th>
            </tr>
            <tr v-for="(item,index) in list">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>
                    <button @click='del(index)'>删除</button>
                </td>
            </tr>
            <tr>
                <td colspan='4'>
                    <button @click='delAll'>全部删除</button>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    暂无数据
                </td>
            </tr>
           
        </table>

        <div>
            <div>
                姓名：<input type="text" v-model='user.name'>
            </div>
            <div>
                年龄：<input type="text" v-model='user.age'>
            </div>    
            <div>
                <button @click='add'>添加</button>
                <button @click="reset">重置</button>
            </div>
        </div>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
                user:{name:'',age:''},
                list:[
                    {name:'李四',age:'20'}
                ]
            },
            methods: {
                //重置
                reset(){
                    this.user={name:'',age:''}
                },
                //删除
                del(index){
                   this.list.splice(index,1) 
                },
                //全部删除
                delAll(){
                    this.list=[]
                },
                //添加
                add(){
                    this.list.push({name:this.user.name,age:this.user.age})
                }
            }
        })
    </script>

五、面试题

\1. ? mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

模型（model）控制了视图(view)的展示，视图(view)又可以改变模型(model)的数据，视图模型（viewModel）是模型和视图之间的桥梁。

MVVM模式的框架适合做数据的增删改查，不适合做动画，操作DOM节点

\2. vue等单页面应用及其优缺点

优点：

? 1、用户体验好，快，内容的改变不需要重新加载整个页面，对服务器压力较小。

? 2、前后端分离，比如vue项目

? 3、完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；

缺点：

? 1、首次加载页面的时候需要加载大量的静态资源，这个加载时间相对比较长。

? 2、不利于 SEO优化，单页页面，数据在前端渲染，就意味着没有 SEO。

\3. 说出至少4种vue当中的指令和它的用法？

v-if（元素的显示隐藏） v-show（元素的显示隐藏，频繁切换使用） v-text（页面输入内容不识别标签） v-html(页面输入内容) v-on（绑定方法） v-bind(绑定属性) v-model(表单的双向绑定)

\4. v-if 和 v-show 区别

v-if（元素的显示隐藏） v-show（元素的显示隐藏，频繁切换使用）

酷哦筱王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day01 vue安装以及指令的基础使用

day01 vue安装以及指令的基础使用一、vue介绍**官网：**https://cn.vuejs.org/**1.vue特点：**易用，灵活，高效2.渐进式：根据需求的不同加载不同模块库和框架的区别： **库：**jq …js 功能单一 **框架:**vue react angular3.vue核心：数据驱动、组件化4.vue安装 **a
复制链接

扫一扫