[学习笔记]vue-前端框架

最新推荐文章于 2024-06-05 09:37:42 发布

杰夫先生going

最新推荐文章于 2024-06-05 09:37:42 发布

阅读量210

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/szwdong_jeff/article/details/105611026

版权

VUE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1 Vue引言：

渐进式JavaScript框架，让我们通过操作很少的DOM（文档对象模型），设置不需要操作页面中任何DOM，很容易完成数据和视图的绑定。其中的架构模式：双向绑定MVVM
注：在使用Vue中，页面中不要引入JQuery框架。

2 安装：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ：开发版本
<script src="https://cdn.jsdelivr.net/npm/vue"></script> ：生产版本

3 vue第一个入门应用

新建html5页面：vue-01-helloworld.html
引入vue.js
创建vue实例，渲染进div标签。注:实例应该在渲染的标签之后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入门第一个案列</title>
</head>
<body>
    <div id="app">
       {{ message }}  <!--双大括号进行变量渲染-->
    </div>
</body>

<!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //定义一个vue实例
    const app = new Vue({
        el: "#app",  //用来给vue实例定义一个作用范围（如下文div标签中的div的id）
        data:{       //用来给vue实例定义一些相关的数据
            message: "Hello Vue!"
        },
    })
</script>
</html>

补充：span标签就是分段。为什么要用span标签？因为样式的问题。打个比方说，你一个块中有很多段内容，要求每段内容显示不同的样式，这时就可以用到span标签。另外配合CLASS属性，让样式更灵活。
span在行内定义一个区域，也就是百一行内可以被span划分成好几个区域，从而实现某种特定效果。span本身没度有任何属性。span 与div
span在CSS定义中属于一个行内元素，而div是块级元素，我们可能通俗地理解为div为大容器，大容器当然回可以放一个小容器了答,span就是小容器。
总结：

vue实例中的el属性，代表vue的作用范围，日后在vue的作用范围内都可以使用vue的语法。
vue实例对象中的data属性，用来给vue实例绑定一些相关的数据。
在使用{{}}进行获取data中的数据时，可以在{{}}中直接书写表达式，运算符，调用相应方法，以及逻辑运算等等。
vue中的el属性不止可以绑定标签的id字段，还可以绑定任意的字段，vue推荐是id。

Example: 字符，对象，数组，数组对象

<body>
    <div id="app">
        {{user.name}}<br/>{{user.age}}<br/>{{array1[0]}}<br/>
        {{array2[0].name}}<br>{{array2[0].age}}<br>{{lists}}<br>{{lists[2]}}<br>
        {{message+'!'}}<br>{{message.toUpperCase()}}
    </div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //定义一个vue实例
    var app = new Vue({
        el: "#app",
        data:{
            message: "Hello Vue!",
            username: "dachui",
            user:{name:"dachui",age:18},
            array1:[1,2,3,4],
            array2:[{name:'ganggang',age:18},{single:'Yes'}],
            lists:["北京",'上海',"深圳"],
        },
    })
</script>

4 v-text和v-html:

v-text: 用来获取data中的数据将数据以文本的形式渲染到执行标签的内部。类似js中的innerTEXT

<body>
   <div id="app" class="aa">
       <span v-text="msg"></span><br>
       <span v-html="msg"></span>
   </div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const test1 = new Vue({
        el:"#app",
        data:{
            msg:"demo test for v text.",
        }
    })
</script>

总结：{{}}插值表达式和v-text的区别 1>v-text会将标签原有的值覆盖，{{}}不会覆盖；2>使用v-text可以避免在网络环境较差的情况下出现插值闪烁。

v-html:用来获取data中的数据，将数据中含有的html标签先解析再渲染到指定标签的内部。类似js中的innerHTML

5 vue的事件绑定:

<body>
  <div id="app">
      <h3>{{message}}</h3>
      <h3 v-text="message"></h3>
      <h3>年龄：{{age}}</h3>
      <input type="button" value="点我增加年龄" v-on:click="changeAge"/>
  </div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //定义一个vue实例
    var app = new Vue({
        el: "#app",
        data:{
            message: "Monet欢迎你！",
            age:23,
        },
        methods:{
            changeAge:function(){
                this.age = this.age + 1; //在函数中，this就相当于当前vue实例。==>this.age++;
            }
        }
    })
</script>

或者这样写：

<body>
   <div id="app">
       <h3>{{age}}</h3>
       <input type="button" value="v-on增加年龄" v-on:click="addage">
       <input type="button" value="@替换v-on减少年龄" @click="minusage">
   </div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vapp=new Vue({
        el:'#app',      //定义vue实例绑定作用域
        data:{age:23,},    //定义vue实例相关数据
        methods:{
            addage:function () {
                this.age++;
            },
            minusage(){
                this.age--;
            }
        }, //定义vue实例事件的处理函数
    })
</script>
</script>

总结：

v-on:事件名=“函数名” eg:v-on:click=“changeAge”。函数定义再vue实例中的methods:{}块中。
可以通过@click替换v-on:click，如例。
在vue实例中，this就是指当前实例本身。可以通过this获取当前实例的相关数据
函数名:function(){} 等价与函数名(){}

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vapp=new Vue({
        el:'',      //定义vue实例绑定作用域
        data:{},    //定义vue实例相关数据
        methods:{}, //定义vue实例事件的处理函数
    })
</script>

6 vue事件的参数传递：

<body>
  <div id="app">
      <span>{{age}}</span><br>
      <input type="button" value="传值" @click="changeage(30,'monet')">
  </div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vapp=new Vue({
        el:"#app",
        data:{
            age:18,
        },
        methods:{
            changeage(count,name){
              this.age =name +':'+ count;
            },
        }
    })
</script>

总结：

传的参数直接写在函数后面的括号里，且vue实例的函数中定义变量接收
传多个参数用逗号分隔，字符用单引号包括。

Example:

<body>
   <div id="app">
       <input type="button" value="-" @click="countf('-')">
       <h2>{{count}}</h2>
       <input type="button" value="+" @click="countf('+')">
   </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            count:1
        },
        methods:{
            countf(act){
                if (act==='+'){
                    if(this.count<10){
                        this.count++;
                    }else{
                        alert('每人购买不超过10件');
                    }
                }else {
                    if (this.count===1){
                        alert('count最小为1');
                        return;
                    }
                    this.count--;
                }
            }
        },
    })
</script>

7 v-show, v-if, v-bind

  7.1. v-show用来控制页面中某个元素是否展示，底层控制是变迁display属性。

<body>
  <div id="app">
     <h3 v-show="true">Monet欢迎你</h3>
      <h3 v-show="show">ganggang欢迎你</h3>
      <input type="button" value="展示隐藏标签" @click="showtab">
      <h3 v-show="age>=30">dachui欢迎你</h3>
      <input type="button" value="通过修改值控制展示" @click="showage">
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            show:false,
            age:18,
        },
        methods:{
            showtab(){
              this.show=!this.show;
            },
            showage(){
              this.age = 31;
            },
        },
    })

总结：v-show可以直接书写Boolean值控制标签元素展示，也可以通过变量表达式控制展示。

7.2： v-if： 用来控制页面元素是否展示。底层控制是DOM元素

<body>
   <div id="app">
       <h2 v-if="show">展示了大锤</h2>
       <input type="button" value="展示大锤？" @click="showOrnot">
   </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            show:false
        },
        methods:{
            showOrnot(){
                this.show=!this.show;
            }
        },
    })
</script>

7.3 v-bind:用来给标签绑定相应属性，从而通过vue动态修改标签属性。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aa{
            border:2px red solid;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2></h2>
        <img width="300" v-bind:title="msg" v-bind:class="css" src="test.png">
        <br>
        <img width="300" v-bind:title="msg" v-bind:class="showCss?'aa':''" v-bind:src="src">
        <input type="button" value="改变图片" @click="changep">
        <br>
        <img width="300" v-bind:title="msg" v-bind:class="{aa:showCss}" v-bind:src="src">
        <input type="button" value="动态控制加入样式" @click="addCss">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            msg:'桌面截图',
            css:"aa",
            showCss:true,
            src:"test.png",
        },
        methods:{
            addCss(){
              this.showCss = !this.showCss;
            },
            changep(){
                this.src = "test1.png";
            }
        },
    })
</script>

注意：v-bind的语法是 v-bind:属性，  简化后为  :属性。 eg: v-bind:class----> :class

<img width="300" v-bind:title="msg" v-bind:class="showCss?'aa':''" v-bind:src="src">
<img width="300" v-bind:title="msg" v-bind:class="{aa:showCss}" :src="src">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            msg:'桌面截图',
            css:"aa",
            showCss:true,
            src:"test.png",
        },
        methods:{
            addCss(){
              this.showCss = !this.showCss;
            },
            changep(){
                this.src = "test1.png";
            }
        },
    })
</script>

8 v-for 和 v-model:

8.1: v-for的作用就是用来对数组或对象进行遍历的。

<body>
  <div id="app">
      <span v-for="u in user">
          {{u}}
      </span>
      <br>
      <span v-for="(value,key) in user">
          {{key}} : {{value}}
      </span>
      <br>
      <span v-for="(value,key,index) in user">
          {{index+1}} : {{key}} : {{value}}<br>
      </span>
      <br>
      <ul>
          <li v-for="a in userlist" :key = "user.mark">
              {{a.name}}:{{a.age}}
          </li>
          <li v-for="a,index in alist">
              {{index+1}} {{a}}
          </li>
      </ul>
  </div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const test1 = new Vue({
        el: "#app",
        data: {
            alist:['one','two','three'],
            user:{name:"Monet",age:23},
            userlist:[
                {name:"dachui",age:18},
                {name:"ganggang",age:27}
            ],
        },
        methods: {},
    })
</script>

总结：在使用v-for时，一定要注意加入:key , 用来给vue内部提供重用和排序的唯一key。

8.2 v-model: 体现了vue中数据的双向绑定(重点)。 
           ：用来绑定标签元素的值与vue实例对象中data数据的值保持一致。从而实现双向的数据绑定机制。

<body>
  <div id="app">
      <input type="text" v-model="inmsg" />
      <span>{{inmsg}}</span>
      <hr>
      <input type="button" value="改变双向绑定的值" @click="changedata">
  </div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const test1 = new Vue({
        el: "#app",
        data: {
            inmsg:'dachui',
        },
        methods: {
            changedata(){
                this.inmsg = "大锤魔怔了";
            },
        },
    })
</script>

总结：v-model的双向绑定指的是：表单中数据的变化导致vue实例中data的变化；vue实例中data的变化也会导致表单中的数据变化；

 MVVM架构：双向绑定。
 Model: 数据 （vue实例中绑定的数据）
 VM: ViewModel（相当于监听器）
 View: 页面（页面中展示的数据）
 model中数据有变化会被监听器传递给view; view中数据有变化也会被监听器传递给model

Example:

<body>
  <div id="app">
      <input type="text" v-model="msg">
      <input type="button" value="添加记事" @click="addnote">
      <br>
      <ul>
          <li v-for="item,index in notebooks">
              {{index+1}} {{item}} <a href="Javascript:;" @click="delrow(index)" >删除</a>
          </li>
      </ul>
      <br>
      <span>总数量：{{notebooks.length}} 条</span><br>
      <input type="button" value="删除所有" @click="delall" v-show="notebooks.length!=0">
  </div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const test1 = new Vue({
        el: "#app",
        data: {
            notebooks:["Monet改名邹大锤了","邹大锤今天魔怔了"],
            msg:"",
        },
        methods: {
            addnote(){
              this.notebooks.push(this.msg);
              this.msg="";
            },
            delrow(index){
                this.notebooks.splice(index,1)//参数一：从哪个下标开始删除； 参数二：删除几个元素。
            },
            delall(){
                this.notebooks=[];
            },
        },
    })
</script>

前端效果：
在这里插入图片描述
9 事件修饰符：

修饰符：用来和事件连用，决定事件触发条件或阻止事件触发机制。
常用的事件修饰符： stop,prevent,capture,self,once,passive.

9.1 stop:用来阻止事件冒泡。

<body>
 <div class="aa" id="app" @click="click1">
    <input type="button"  value="按钮" @click.stop="click2">
 </div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const test1 = new Vue({
        el: "#app",
        data: {},
        methods: {
            click1(){
                alert("div的点击");
            },
            click2(){
              alert("input的点击");
            },
        },
    })
</script>

总结：如上，div标签和input的标签都有click事件，点击input的click事件后会自动触发其父节点的相同事件。
这个时候就用stop修饰符组织这样的冒泡发生。

9.2 prevent： 阻止标签的默认行为。如下例，就阻止了超链接跳转到百度。

<a href="https://www.baidu.com/" @click.prevent="click3">baiduUrl</a>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const test1 = new Vue({
        el: "#app",
        data: {},
        methods: {
            click1(){alert("div的点击");},
            click2(){alert("input的点击");},
            click3(){},
        },
    })
</script>

9.3 self:用来针对当前标签的事件触发。只触发自己标签上特定的事件，不监听事件冒泡，比如div标签内存在click事件，
    如果其div块中其他的标签上也存在click事件，那div标签会监听里面的click事件，里面的click事件发生，
   div的click事件也会发生。这个时候可以在divclick事件上加上@click.self

<div id="app">
      <div class="aa" @click="click1">
          <input type="button"  value="按钮" @click.stop="click2">
      </div>
      <hr>
      <div class="aa" @click.self="click1">
          <input type="button"  value="按钮" @click="click2">
      </div>
      <br>
      <a href="https://www.baidu.com/" @click.prevent="click3">baiduUrl</a>
  </div>

9.4 once:就是让指定事件只触发一次。

<div class="aa" @click.self="click1">
    <input type="button"  value="按钮" @click="click2">
    <input type="button"  value="按钮只触发一次" @click.once="click2">
</div>

10 按键修饰符

按键修饰符是与键盘中按键事件绑定在一起的，用来修饰特定的按键事件。
常用的有：enter,tab,delete,esc,space,up,down,left.right

<div id="app">
    <input type="text" v-model="msg" @keyup.enter="keyup1">
</div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const test1 = new Vue({
        el: "#app",
        data: {
            msg:'',
            shows:false,
        },
        methods: {
            keyup1(){
                alert("enter触发");
            },
        },
    })
</script>

11，生命周期
生命周期的8个函数在这里插入图片描述 12，组件（component）

12.1 全局组件：Vue.component('',{}) 参数1是组件的名称，参数2是组件的配置{}。例：template配置

<body>
<div id="app">
    <!--使用组件-->
    <login></login>
</div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //全局组件注册.参数1：组件名称。 参数2：组件配置对象 template：用来书写组件的html的代码（模板中只能存在一个组件 如:<div>）
    Vue.component('login',{
        template:'<div><h1>用户登录</h1></div>'
    })
    const test1 = new Vue({
        el: "#app",
        data: {},
        methods: {},
    })
</script>

12.2 局部组件：通过将组件组测给vue实例中一个components属性来完成组件组测。

第一种开发方式：

<body>
<div id="app">
   <userlogin></userlogin>
</div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let login ={
        template:'<div><h2>用户登录</h2></div>'
    };  //局部组件的具体定义
    const test1 = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components:{   //用来注册局部组件
          userlogin:login,  //注册局部组件
        }
    })
</script>

第二种开发方式：通过标签模板注册局部模板

<body>
<div id="app">
   <userlogin></userlogin>
</div>
<template id="loginTemplate">
    <div><h2>user登录</h2></div>
</template>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let login1 ={
        template:'#loginTemplate'
    };  //局部组件的具体定义

    const test1 = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components:{   //用来注册局部组件
          userlogin:login1,  //注册局部组件
        }
    })
</script>

Vue CLI脚手架

1 定义：基于vue.js进行快速开发的完整系统，使用vue脚手架之后我们开发的页面是一个完整的系统（项目）。

下载node.js安装包，配置环境变量PATH(安装路径，node_global的路径)
配置淘宝镜像：npm config set registry https://registry.npm.taobao.org
验证镜像： npm config get registry
配置npm下载依赖位置cache，global,安装路径下新建文件夹node-global和node-cache：
npm config set prefix “C:\mr-wangInstallAddress\node-v14.0.0-win-x64\node-global”
npm config set cache “C:\mr-wangInstallAddress\node-v14.0.0-win-x64\node-cache”
验证npm配置：打开C:\Users\用户.npmrc
安装vue cli 脚手架： npm install -g vue-cli
卸载脚手架： npm -uninstall -g vue-cli

2 第一个vue脚手架项目：

2.1  创建新项目： vue init webpack 项目名字 
2.2  运行项目：npm start  (在项目根目录下)

2.3 项目结构：
build   --------------->用来使用webpack打包使用的依赖
config   -------------->用来做整个项目配置的目录
node_modules   -------->用来管理项目中使用的依赖
src  ------------------>用来书写vue的源代码 [重点]
    assets：   用来存放静态资源 [重点]
	components：用来书写vue组件 [重点]
	router：用来配置项目中的路由 [重点]
	App.vue：    项目中的根组件 [重点]
	main.js：    项目中的主入口 [重点]
static  ---------------->其他静态资源
.babelrc---------------->将es6语法转化为es5运行
.editorconfig ---------->项目编辑配置
.gitignore    ---------->git版本控制忽略文件
.postcssrc.js ---------->源码相关js
index.html    ---------->项目主页
package.json  ---------->类似于项目中的pom文件，依赖管理
package-lock.json ------>对package.json加锁
README.md     ---------->项目说明文件

2.4 开发方式： 
1， 一切皆组件，在项目中开发一个个组件，对应一个个业务功能模块，日后可以将各个组件组合到一起形成前端系统。
2，日后开发中不在编写html文件，编写的是*.vue， vue-cli会将组件(*.vue)编译成html文件。

在这里插入图片描述
App.vue:

<template>
  <div>
    <a href="#/home" >主页</a>
    <a href="#/users" >用户管理</a>
    <a href="#/students" >学生管理</a>
<!--    <router-link to="/home">主页</router-link>-->
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
</style>

index.js:

import Vue from 'vue'
import Router from 'vue-router'
import home from "../components/home";
import users from "../components/users";
import students from "../components/students";

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/', redirect:'/home'},
    {path: '/home', component: home},
    {path: '/users', component: users},
    {path: '/students', component: students},
  ]
})

main.js:

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2.5 安装axios ： 
    1 npm install axios --save-dev
    2 import axios from 'axios'  (在main.js中导入)
    3 Vue.prototype.$http=axios; (修改内部的$http为 axios)

2.6 使用 axios : this.$http.get("url").then((res)=>{this.data = res.data.result})

杰夫先生going

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[学习笔记]vue-前端框架

1 Vue引言：渐进式JavaScript框架，让我们通过操作很少的DOM（文档对象模型），设置不需要操作页面中任何DOM，很容易完成数据和视图的绑定。其中的架构模式：双向绑定MVVM注：在使用Vue中，页面中不要引入JQuery框架。2 安装：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><...
复制链接

扫一扫

专栏目录