三、前端技术-vue

最新推荐文章于 2024-09-17 19:45:31 发布

一个孤独漫步者的遐想

最新推荐文章于 2024-09-17 19:45:31 发布

阅读量1k

点赞数

分类专栏：前端技术文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43555997/article/details/111638735

版权

前端技术专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、介绍

1、Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官方网站：https://cn.vuejs.org

2、初始Vue.js

创建 demo.html

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RpbGy0Ht-1608799088961)(F:\谷粒学院教育项目.assets\6-vue入门案例.png)]$

<!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>


<!-- id标识vue作用的范围 -->
<div id="app">
    <!-- {{}} 插值表达式，绑定vue中的data数据 -->
    {{ message }}
</div>

<script src="vue.min.js"></script>

<script>

    // 创建一个vue对象
    new Vue({
        el: '#app',//绑定vue作用的范围
        data: {//定义页面中显示的模型数据
            message: 'Hello Vue!'
        }
    })



</script>
</body>
</html>

这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作

在vs code中创建代码片段：

文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets

注意：制作代码片段的时候，字符串中如果包含文件中复制过来的“Tab”键的空格，要换成“空格键”的空格

使用：vuehtml

	
	{
		"vue htm": {
			"scope": "html",
			"prefix": "vuehtml",
			"body": [
				"<!DOCTYPE html>",
				"<html lang=\"en\">",
				"",
							"<head>",
							"    <meta charset=\"UTF-8\">",
							"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
							"    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
							"    <title>Document</title>",
							"</head>",
							"",
							"<body>",
							"    <div id=\"app\">",
							"",
							"    </div>",
							"    <script src=\"vue.min.js\"></script>",
							"    <script>",
							"        new Vue({",
							"            el: '#app',",
							"            data: {",
							"                $1",
							"            }",
							"        })",
							"    </script>",
							"</body>",
							"",
							"</html>",
						],
						"description": "my vue template in html"
					}
				
				}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VxaE09Re-1608799088964)(F:\谷粒学院教育项目.assets\image-20201212104057610.png)]$

二、基本语法

1、基本数据渲染和指令

创建 01-基本数据渲染和指令.html

你看到的 v-bind 特性被称为指令。指令带有前缀 v-

除了使用插值表达式**{{}}**进行数据渲染，也可以使用 **v-bind**指令，它的简写的形式就是一个冒号（:）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!--v-bind指令
        单向数据绑定
        这个指令一般用在标签属性里面，获取值
        -->
        <h1 v-bind:title="message">
            {{content}}
        </h1>


        <!--简写方式-->
        <h2 :title="message">{{content}}</h2>



    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                content: '我是标题',
                message: '页面加载于 ' + new Date().toLocaleString()
            }
        })
    </script>
</body>

</html>

2、双向数据绑定

创建 02-双向数据绑定.html

双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord"/>

<!-- v-model 可以进行双向的数据绑定  -->
<input type="text" v-model="searchMap.keyWord"/>

<p>{{searchMap.keyWord}}</p>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                 keyWord: '52Hz'
    }
            }
        })
    </script>
</body>

</html>

单向绑定：自己玩儿

双向绑定：联动改变

3、事件

创建 03-事件.html

需求：点击查询按钮，按照输入框中输入的内容查找公司相关信息

在前面的例子基础上，data节点中增加 result，增加 methods节点并定义 search方法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!--vue绑定事件-->
       <button v-on:click="search()">查询</button>
       <!--简写-->
        <button @click="search">查询1</button>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                 keyWord: '52Hz'
                            },
                //查询结果
                result:{}
            },

            //定义多个方法
            methods:{
                search(){
                    console.log('search....')
                },
                f1(){
                    console.log('f1....')
                }
            }
        })
    </script>
</body>

</html>

4、修饰符

创建 04-修饰符.html

修饰符 (Modifiers) 是以半角句号==（.）==指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():

即阻止事件原本的默认行为

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">

        <form action="save" v-on:submit.prevent="onSubmit">
            <input type="text" id="name" v-model="user.username"/>
            <button type="submit">保存</button>
        </form>
    </div>
    <script src="vue.min.js"></script>
    <script> 
        new Vue({
            el: '#app',
            data: {
                user:{}
            },
            methods:{

                onSubmit(){
                    if(this.user.username){
                        console.log("提交表单")
                    }else{
                        alert("请输入用户名")
                    }
                }
            }
        })
    </script>
</body>

</html>

5、条件渲染

创建 05-条件渲染.html

v-if：条件指令

选中不选中显示不同的区域

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
    <input type="checkbox" v-model="ok"/>是否同意
    <h1 v-if="ok">52Hz</h1>
    <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
    <h1 v-else>phoenix</h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false
            }
        })
    </script>
</body>

</html>

v-show：条件指令

使用v-show完成和上面相同的功能

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

6、列表渲染

创建 06-列表渲染.html

v-for：列表循环指令

例1：简单的列表渲染

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="n in 10">{{n}}</li>
        </ul>
        <ol>
            <li v-for="(n,index) in 10">{{n}}-{{index}}</li>
        </ol>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>
</body>

</html>

例2：遍历数据列表

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="n in 10">{{n}}</li>
        </ul>
        <ol>
            <li v-for="(n,index) in 10">{{n}}-{{index}}</li>
        </ol>

        <hr/>
         <table border=1>
            <tr v-for="user in userList">
               
                <td>{{user.id}}</td>
                <td>{{user.username}}</td> 
                <td>{{user.age}}</td>           
            </tr>
        </table>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList: [
                    { id: 1, username: 'helen', age: 18 },
                    { id: 2, username: 'peter', age: 28 },
                    { id: 3, username: 'andy', age: 38 }
    ]
            }
        })
    </script>
</body>

</html>

三、前端技术-vue组件

一、组件（重点）

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QGlVAigH-1608799088966)(F:\谷粒学院教育项目.assets\0.5887660670164327.png)]$

1、局部组件

创建 01-1-局部组件.html

定义组件

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //定义vue使用组件
            components: {
                'Navbar':{
                    //组件内容
                    template:'<ul><li>首页</li><li>学员管理</li></ul>'
                }
            }
        })
    </script>
</body>

</html>

2、全局组件

创建 01-2-全局组件.html

定义全局组件：components/Navbar.js

// 定义全局组件
Vue.component('Navbar', {
    template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script src="components/Navbar.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>
</body>

</html>

二、实例生命周期

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1pFzeNHr-1608799088968)(F:\谷粒学院教育项目.assets\0.9177152660737906.png)]$

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        Hello
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            },
            created(){
                debugger
                //页面渲染之前执行
                console.log('created...')
            },
            mounted(){
                debugger
                //页面渲染之后执行
                console.log('monted...')
            }
        })
    </script>
</body>

</html>

调试

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f4H7AT84-1608799088970)(F:\谷粒学院教育项目.assets\image-20201213072902319.png)]$

三、vue-路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router 库

创建 04-路由.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>Hello App!</h1>
        <p>
             <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                <router-link to="/">首页</router-link>
                <router-link to="/student">会员管理</router-link>
                 <router-link to="/teacher">讲师管理</router-link>
            </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>

    </div>
    <!-- 第一步引入vue -->
    <script src="vue.min.js"></script>
    <!-- 第二部引入路由 -->
    <script  src="vue-router.min.js"></script>
    
    <script>
         // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来

    const Welcome = { template: '<div>欢迎</div>' }
    const Student = { template: '<div>student list</div>' }
    const Teacher = { template: '<div>teacher list</div>' }


    // 2. 定义路由
    // 每个路由应该映射一个组件。
    const routes = [
        { path: '/', redirect: '/welcome' }, //设置默认指向的路径
        { path: '/welcome', component: Welcome },
        { path: '/student', component: Student },
        { path: '/teacher', component: Teacher }
    ]


    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })


    // 4. 创建和挂载根实例。
    // 从而让整个应用都有路由功能
    const app = new Vue({
        el: '#app',
        router

    })


    // 现在，应用已经启动了！
    </script>
</body>

</html>

四、axios

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oOsjDSb2-1608799088971)(F:\谷粒学院教育项目.assets\02-axios操作.png)]$

axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端

在浏览器中可以帮助我们完成 ajax请求的发送
在node.js中可以向远程接口发送请求

获取数据

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 把userList数组里面数据显示，使用v-for指令 -->
        <div v-for="user in userList">
            {{user.name}}--{{user.age}}
        </div>

    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //固定结构
            data: {//在data定义变量和初始值
                //定义变量，值为空数组
                userList:[]
            },
            created(){//页面渲染之前执行
                //调用定义的方法
                this.getUserList()
            },
            methods:{//编写具体的方法
                //创建方法，查询所有用户数据
                getUserList(){
                    //使用axios发送ajax请求
                    //axios.提交方式
                    //axios.get("请求接口路劲").then(箭头函数).cath(箭头函数)
                    axios.get("data.json")
                    .then(
                        //请求成功执行then方法
                        response=>{
                            //response就是返回的数据
                            //console.log(response)
                            this.userList=response.data.data.items
                            //console.log(this.userList)
                        }

                    )
                    .catch(
                        //请求失败执行catch方法
                        error=>{

                        }
                    )

                }

            }
        })
    </script>
</body>

</html>

五、element-ui：

element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，方便程序员进行页面快速布局和构建

官网： http://element-cn.eleme.io/#/zh-CN

创建 06-element-ui.html

将element-ui引入到项目

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZrshCjMl-1608799088972)(F:\谷粒学院教育项目.assets\67c16425-795a-48bb-ad7d-e0b8fa1c8ea5.png)]$

1、引入css

<!-- import CSS -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

2、引入js

<!-- import Vue before Element -->
<script src="vue.min.js"></script>
<!-- import JavaScript -->
<script src="element-ui/lib/index.js"></script>

3、编写html

<div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
        <p>Try Element</p>
    </el-dialog>
</div>

关于.sync的扩展阅读

https://www.jianshu.com/p/d42c508ea9de

4、编写js

<script>
    new Vue({
      el: '#app',
      data: function () {//定义Vue中data的另一种方式
        return { visible: false }
      }
    })
</script>

一个孤独漫步者的遐想

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录