Vue的学习

最新推荐文章于 2023-10-21 02:45:57 发布

欧拉0981

最新推荐文章于 2023-10-21 02:45:57 发布

阅读量450

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_46160310/article/details/113307654

版权

一、Vue框架
常用地指令学习:
https://cn.vuejs.org/官网地址
概述：前端领域当中有三大框架（都是开发单页面应用的框架）

Angular诞生于2009年，是由谷歌创建出来的框架

React诞生于2013年，是由facebook公司创建出来的框架

vue诞生于2014年，是由中国在校大学生尤玉溪创建出来的。
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式（JavaScript）框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
1.1Vue框架基本使用
注意：vue它是属于前端当中的一个JavaScript框架。源码都封装到了一个尾缀为JS这样的文件里面。
因此我们需要获取源码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入Vue源码（引包）-->
    <script src="./js/vue.min.js"></script>
</head>
<body>
    <!--进行页面布局-->
    <div id="app">
        <h1>我是小明呀，今年{{age}}啦！</h1>
    </div>
</body>
</html>
<script>
    //当程序中引入vue框架的时候，这个框架对外暴露了一个vue构造函数
    //通过vue构造函数创建vue类实例
    console.log(Vue);
    var vm = new Vue({
        //挂载点（将vue实例）和结构层中标签进行联系
        el:"#app",
        //vue实例数据来源
        data:{
            age:18
        }
    });
    console.log(vm);
//修改实例age属性值
vm.age=11;
vm.age=22;
</script>

结果：
在这里插入图片描述

1.2Vue框架中常用的指令
概述：Vue框架给我们提供了很多的指令，都是以v-xxxx开头（为什么是以v开头，因为是Vue提供的），Vue提供的这些指令起始都是作为标签属性直接使用；
指令是由vue提供的，主要的作用是可以操作标签（文本、样式、事件等等）
指令理解：相当于长官给士兵下达军令（我让你干什么你就干什么）

<div id='box' class='cur'>我是div</div>

1.2.1v-text
概述：可以更新标签的文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引包-->
    <script src="./js/vue.min.js"></script>
</head>
<body>
   
    <div id="app">
        <h1>下面的指令是用来操作文本的</h1>
        <p v-text="msg"></p>
        <!--横线-->
        <hr>
        <p>{{msg}}</p>
        <p v-html="msg"></p>
    </div>
</body>
</html>
<script>
    //创建vue实例
    var vm = new Vue({
        el:"#app",
        data:{
            msg:" <a href='http://www.baidu.com'>百度</a>"
        }
    })
</script>

v-text：可以更新标签的文本内容【简写的方式是双大括号】
v-html：也可以更新标签文本内容【如果渲染数据为标签形式字符串，会真的渲染为标签】
结果：
在这里插入图片描述

1.2.2v-show
概述：v-show可以控制标签的显示与隐藏，底层原理其实是通过CSS中display属性进行控制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引包-->
    <script src="./js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li >吃饭</li>
            <li v-show='false'>睡觉</li>
            <li>打豆豆</li>
        </ul>
    </div>
</body>
</html>
<script>
    //创建实例：
    var vm = new Vue({
        el:"#app"
    })

</script>

结果：
在这里插入图片描述

Vue选项卡练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.min.js"></script>
</head>
<body>
   
    <div id="app">
        <button @click="add('军事')">军事</button>
        <button @click="add('新闻')">新闻</button>
        <button @click="add('直播')">直播</button>
        <ul v-show="'军事'===info">
            <li>军事</li>
            <li>军事</li>
            <li>军事</li>
            <li>军事</li>
            <li>军事</li>
            <li>军事</li>
            <li>军事</li>
            <li>军事</li>
            <li>军事</li>
            <li>军事</li>
        </ul>
        <ul v-show="'新闻'===info">
            <li>新闻</li>
            <li>新闻</li>
            <li>新闻</li>
            <li>新闻</li>
            <li>新闻</li>
            <li>新闻</li>
            <li>新闻</li>
            <li>新闻</li>
            <li>新闻</li>
            <li>新闻</li>
        </ul>
        <ul v-show="'直播'==info">
            <li >直播</li>
            <li>直播</li>
            <li>直播</li>
            <li>直播</li>
            <li>直播</li>
            <li>直播</li>
            <li>直播</li>
            <li>直播</li>
            <li>直播</li>
            <li>直播</li>
        </ul>
    </div>
</body>
</html>
<script>
    //创建实例
    var vm = new Vue({
        el: "#app",
        data:{
            info:""
        },
        //书写标签事件处理函数add
        methods:{
            //事件处理函数add
            add(a){
                //修改Vue实例属性值即可
                this.info=a;
            
        }
        }
        
    })
</script>

结果：每点击下面的按钮就会出现相应的内容
在这里插入图片描述

1.2.3v-if
概述：v-if根据属性值为真或假进行渲染标签。
注：它和v-show区别：显示与隐藏的标签（在节点树上始终是有的）
v-if：控制标签在节点数上上树、下树

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引包-->
    <script src="./js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>你的性别是什么呀？</h1>
        <ul>
            <li v-if="'男'==sex">男</li>
            <li v-else-if="'女'==sex">女</li>
            <li v-else>未知</li>
        </ul>
    </div>
    
</body>
</html>
<script>
    var vm =new Vue({
        el:"#app",
        data:{
            sex:"未知"
        }
    })
</script>

结果：
在这里插入图片描述

1.2.4v-for******

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>非常常用的指令v-for</h1>
        <h1>循环语句遍历数字</h1>
        <h2 v-for="item in 100">我是二级标题{{item}}</h2>
        <h1>循环语句遍历数组</h1>
        <ul>
            <li v-for="(item,index) in arr">{{item}}----{{index}}</li>
        </ul>
        <table>
            <tr v-for="row in 9">
                <td v-for="col in 9" v-show="row>=col">{{row *col}}</td>
            </tr>
        </table>
    </div>
</body>
</html>
<script>
    //创建Vue实例
    var vm= new Vue({
        el:"#app",
        data:{
            arr:['吃饭','睡觉','打豆豆']
        }
    })
</script>

结果：
在这里插入图片描述

1.2v-on****
概述：这个指令可以给元素绑定事件。V-on简写方式即为@；

<!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>
<script src="./js/vue.min.js"></script>
<body>
    <div id="app">
        <h1>我是计数器小案例---{{count}}</h1>
        <button v-on:click="add">单击我+1</button>
        <button v-on:click="minus">单击我-1</button>
        <p @mouseenter="haha">我绑定鼠标移动</p>
    </div>
    
</body>
</html>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            count:1
        },
        //时间处理函数的地方
        methods:{
            //加上1事件处理函数
            add(){
                this.count++;
                this.count=this.count>=10?0:this.count;
            },
            minus(){
                this.count--;
                this.count=this.count<=0?0:this.count;
            },
            haha(){
                alert("鼠标在我上面")
            }
        }
    })
</script>

在这里插入图片描述

Mehod：这里是书写标签处理函数的部分，一定要注意函数的名字务必要准确
1.2.6v-model****
概述：v-model这个指令，只能给表单元素使用【给非表单元素使用也可以，但是没有任何效果】

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>我是实例属性值{{msg}}</h1>
        <input type="text" v-model="msg">
    </div>
</body>
</html>
<script>
    //创建Vue实例
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"我是实例数据"
        }
    })
</script>