vue入门开发

XUN~MLF

已于 2022-06-08 12:32:00 修改

阅读量3.8k

点赞数 3

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

于 2022-02-09 14:10:22 首次发布

本文链接：https://blog.csdn.net/XUN__MLF/article/details/122840349

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、介绍 vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官方网站：Vue.js

2、初始vue

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</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>

3、基本语法

v-text

 <div id="app">
        {{ message }}

        <h1 v-text="message+'!'"></h1>
        
        <h1 v-html="message"></h1>

    </div>

    <script>
        var app = new Vue({ 
            el: '#app',
            data: {
                message:" <a href='#'> aaaaaaaaaaa</a>"
            }   
           
        })
    </script>

v-on

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

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

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="v-on" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">

        <!--双击事件-->
        <input type="button" value="v-on简写" @dblclick="doIt">


        <!--可触发事件  enter-->
        <input type="text" @keyup.enter="ha">
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                doIt: function () {
                    alert("aaaa")
                },
                ha:function(){
                    alert("吃了没?");
                }

            }
        })
    </script>
</body>

</html>

v-show

  <div id="app">
    <input type="button" value="改变现实状态" @click="change">
    <!--

        v-show:原理修改元素的display属性
    -->
      <img src="./pictgure/3.jpg" v-show="show">
    </div>
    <script>    
        var app = new Vue({
            el: '#app',
            data: {
                show:true,
            },
            methods:{
                    change:function(){
                        this.show = !this.show;
                    }
            }  ,

        })
    </script>

v-if

 <div id="app">
        <input type="button" value="改变现实状态" @click="change">
        <!--v-if
            直接将元素去除
        -->
       <p v-if="show">hei</p>
    </div>

    <script>
        var app = new Vue({ 
            el: '#app',
            data: {
                show:true,
            },
            methods:{
                    change:function(){
                        this.show = !this.show;
                    }
            }  ,

        })
    </script>

v-bind

<div id="app">

      <img v-bind:src="imgsrc" >
      <img :src="imgsrc" :title="title">
    </div>

    <script>    
        var app = new Vue({
            el: '#app',
            data: {
                show:true,
                imgsrc:"./pictgure/3.jpg",

                title:"复仇者联盟"
            },
            methods:{
                    change:function(){  
                        this.show = !this.show;
                    }
            }  ,

        })
    </script>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <!--v-for
        跟据    数据2生成列表结构
        -->
        <input type="button" value="添加" @click="add">
        <input type="button" value="shift" @click="remove">

        <ul>
            <li v-for="(it,index) in arr"> {{index+1}}大城市:{{it}}</li>
        </ul>

        <h2 v-for="item in vgtable">{{ item.name }}</h2>
     
    </div>

    <script>    
        var app = new Vue({
            el:"#app",
            data:{
                arr:["北京","上海","南京","杭州"],
                vgtable:[
                    {name:"西兰花"},
                    {name:"青菜"} 
                ]
            },
            methods:{
                add:function(){
                    this.vgtable.push({name:"大白菜"});
                },
                remove:function(){
                    this.vgtable.shift();
                }
            }
        })
    </script>

</body>
</html>

v-model

<div id="app">


        <!--便捷获取表单元素的值
           v-model  双向数据绑定

           select
        -->
        <input type="button" value="修该message的值" @click="de">
     <input type="text" v-model="message" @keyup.enter="change">
     <h2>{{ message}}</h2>
    </div>

    <script>    
        var app = new Vue({
            el: '#app',
            data: {
              message:"黑马程序员"  
            },
            methods:{
                    change:function(){  
                        alert(this.message);
                    },
                    de:function(){
                        this.message="你好"
                    }


            }  ,

        })
    </script>

4、组件

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAWFVOfk1MRg==,size_20,color_FFFFFF,t_70,g_se,x_16

局部组件

var app = new Vue({
 el: '#app',
 // 定义局部组件，这里可以定义多个局部组件
 components: {
 //组件的名字
 'Navbar': {
 //组件的内容
 template: '<ul><li>首页</li><li>学员管理</li></ul>'
 }
 }
})

使用组件：

<div id="app">
 <Navbar></Navbar>
</div>

全局组件

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

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

分析生命周期相关方法的执行时机

//===创建时的四个事件
beforeCreate() { // 第一个被执行的钩子方法：实例被创建出来之前执行
 console.log(this.message) //undefined
 this.show() //TypeError: this.show is not a function
 // beforeCreate执行时，data 和 methods 中的 数据都还没有没初始化
},
created() { // 第二个被执行的钩子方法
 console.log(this.message) //床前明月光
 this.show() //执行show方法
 // created执行时，data 和 methods 都已经被初始化好了！
 // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
},
beforeMount() { // 第三个被执行的钩子方法
 console.log(document.getElementById('h3').innerText) //{{ message }}
 // beforeMount执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中
},
mounted() { // 第四个被执行的钩子方法
 console.log(document.getElementById('h3').innerText) //床前明月光
 // 内存中的模板已经渲染到页面，用户已经可以看见内容
},
//===运行中的两个事件
beforeUpdate() { // 数据更新的前一刻
 console.log('界面显示的内容：' + document.getElementById('h3').innerText)
 console.log('data 中的 message 数据是：' + this.message)
 // beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染
},
updated() {
 console.log('界面显示的内容：' + document.getElementById('h3').innerText)console.log('data 中的 message 数据是：' + this.message)
 // updated执行时，内存中的数据已更新，并且页面已经被渲染
}

5、路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。 Vue.js 路由需要载入 vue-router 库

5-1引入js

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

5-2编写html

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

5-3编写js

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

6、axios

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

在浏览器中可以帮助我们完成 ajax请求的发送

在node.js中可以向远程接口发送请求

获取数据

<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<--注意：测试时需要开启后端服务器，并且后端开启跨域访问权限-->
var app = new Vue({
 el: '#app',
 data: {
 memberList: []//数组
 },
 created() {
 this.getList()
 },
 methods: {
 getList(id) {
 //vm = this
 axios.get('http://localhost:8081/admin/ucenter/member')
 .then(response => {
 console.log(response)
 this.memberList = response.data.data.items
 })
 .catch(error => {
 console.log(error)
 })
 }
 }
})

显示数据

<div id="app">
 <table border="1">
 <tr>
 <td>id</td>
 <td>姓名</td>
 </tr>
 <tr v-for="item in memberList">
 <td>{{item.memberId}}</td>
 <td>{{item.nickname}}</td>
 </td>
 </tr>
</table>
</div>

7、element-ui

element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，方便程序员进行页面快速布局和构建官网： Element - The world's most popular Vue UI framework

7-1引入css

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

7-2引入js

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

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

7-4编写js

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

XUN~MLF

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
2
评论
vue入门开发

1、介绍 vue.js 是什么Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。官方网站：Vue.js2、初始vue<!DOCTYPE html><html lang="en"><head> <meta charset
复制链接

扫一扫