Vue学习基础版汇总V2.0.0_html-js-css

Vue2.0学习基础知识汇总 1.Vue过滤器【作用】用于文本的格式化，用在两个地方：插值表达式和v-bind属性绑定。【语法】过滤器应该被添加在JavaScript表达式的尾部，由"管道符"进行调用，如下：


<p>{{message | capitalize}}p>   //将message作为参数传入capitalize函数处理完得到返回值

<div v-bind="rawId | formatId">div>

【案例】修改参数的首字母为大写

<body>
    <div id="app">
        <p>message的值：{{message | capi}}p>
    div>
    <script src="./lib/vue.js">script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                message: "douglas"
            },
            methods:{   
            },
            //过滤器函数，必须定义到filters节点之下
            filters:{
                capi(val){ //注意：过滤器函数形参中的val，永远都是‘管道符’前面的那个值
                    //强调：过滤器一定要有返回值
                    //字符串有charAt方法，参数为索引值，表示从字符串中把索引对应的字符获取出来
                    //toUpperCase方法是将小写转为大写
                    const first = val.charAt(0).toUpperCase();
                    //字符串的slice方法，可以截取字符串，从指定索引开始，截取之后的字符串返回
                    const other = val.slice(1);
                    console.log(first+other)
                    return first + other;
                }
            }
        })
    script>
body>

1.1.Vue全局过滤器【作用】在filters节点下定义的过滤器，称为"私有过滤器"，因为它只能在当前vm实例所控制的el区域使用。如果希望在多个vue实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：

//全局过滤器 - 独立于每个vm实例之外
//Vue.filter()方法接受两个参数：
//1.第一个参数：全局过滤器名字
//2.第二个参数：全局过滤器的"处理函数"
Vue.filter('capitalize',(str) => {
	return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
})

【注意】如果全局过滤器与私有过滤器名字冲突，优先调用私有过滤器！

2.Vue侦听器 2.1.什么是侦听器【概念】watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的 *** 作。【语法】

<script>
	const vm = new Vue({
        el:"#app",
        data:{username:''},
         //所有的侦听器都定义在watch中
        watch:{
            //1.监听username值的变化
            //2.侦听器本质上是一个函数，要监视那个数据的变化，就把数据名作为方法名即可
            username(newVal,oldVal){
                console.log(newVal,oldVal)
            }
        }
    })
script>

【案例】实时监测用户名是否被占用

<body>
    <div id="app">
        姓名：<input type="text" placeholder="请输入···" v-model="username"> 
    div>
<script src="./lib/vue.js">script>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            username:''
        },
        watch:{
            //监听username值的变化
           async username(newVal){
              if(newVal == '') return
            //使用 axios 发起请求，判断用户名是否可用
               const {data: res} = await axios.get('https://www.escook.cn/api/finduser/'+newVal)
               console.log(res)
            }
        }
    })
script>
body>

2.2.侦听器之immediate 【immediate】当前页面加载时，自动触发一次监听对象的函数【案例】

<script>
	const vm = new Vue({
        el:"#app",
        data:{
            username:'admin'
        },
        //所有的侦听器，都应该被定义到watch节点下
        watch:{
            //定义对象格式的侦听器
            username:{
                //侦听器处理函数
                handler(newVal,oldVal){
                    console.log(newVal,oldVal)
                }
                //immediate:选项的默认值是false
                //immediate的作用：控制侦听器是否自动触发一次
                immediate:true
            }
        }
    })
script>

2.3.侦听器之deep 【作用】监听对象中的属性变化【语法】

<script>
	const vm = new Vue({
        el:"#app"，
        data:{
        	info:{
        		username:'admin'
    		}	
    	},
        watch:{
            //第一种对象属性监听写法           
        	info:{
            	handler(newVal){
        			console.log(newVal)
    			},
                //开启深度监听，只要对象中任何一个属性变化了，都会触发对象的侦听器
                //默认值false    
                deep:true    
            }   
            //第二种对象属性监听写法
            'info.username'(newVal){
                console.log(newVal)
            }
        }               
    })
script>

2.4.侦听器小结方法格式的侦听器缺点：无法在刚进入页面的时候，自动触发。缺点：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器。对象格式的侦听器好处：可以通过immediate选项，让侦听器自动触发。好处：可以通过deep选项，让侦听器深度监听对象中每个属性的变化。

3.Vue计算属性

【概念】计算属性的是通过一些列运算之后，最终得到一个属性值。

【语法】这个动态计算出来的属性值可以被模板结构或methods方法使用。

<script>
	const vm = new Vue({
        el:"#app",
        data:{
            r:0,g:0,b:0
        },
        //计算属性节点
        computed:{
            rgb(){
                return `rgb(${this.r},${this.g},${this.b})`
            }
        },
        methods:{
            show(){
                console.log(this.rgb)
            }
        }
    })
script>

【小结】计算属性节点~所有的计算属性，都要定义到computed节点下，计算属性定义成“方法格式”提高了代码的复用【案例】自定义rgb值展示背景色

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link href="./lib/bootstrap.css"/>
head>
<style>
    .box {
        width: 200px;
        height: 100px;
        background-color: aqua;
    }
style>
<body>
    <div id="app">
        <div>
            <span>R:span>
            <input type="text" v-model.number="r">
        div>
        <div>
            <span>G:span>
            <input type="text" v-model.number="g">
        div>
        <div>
            <span>B:span>
            <input type="text" v-model.number="b">
        div>

        <div class="box" :style="{ backgroundColor: rgb}">
            {{rgb}}
        div>
        <button @click="show">按钮button>
    div>
    <script src="./lib/vue.js">script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                r:'0',
                g:'0',
                b:'0'
            },
            //计算属性节点~所有的计算属性，都要定义到computed节点下，计算属性定义成“方法格式”
            computed:{
                rgb(){
                    return `rgb(${this.r},${this.g},${this.b})`
                }
            },
            //方法函数节点
            methods:{
                show(){
                    console.log(this.rgb)
                }
            }
        })
    script>
body>
html>

4.axios请求库 4.1.axios的基础语法【语法】

axios({
	method: '请求的类型',
	url: '请求的url地址',
	params:{
			id:1
			},//URL中查询参数  GET请求使用
	data:{}  //请求体参数 Post请求使用
}).then((result)=>{
	//.then 用来指定请求成功之后的回调函数
	// 形参中的result是请求成功之后的结果
})

【GET】请求案例-第一种方式

axios({
    method: 'GET',
    params:{
      'id': '1'
    },
    url:'http://localhost:8866/stu/student/listVue'
}).then(function(res){
   console.log(res)
})

【GET】第二种方式

document.querySelector('#btnGet').addEventListener('click',async function(){
//解构赋值的时候，使用：进行重命名
//1.调用axios之后，使用asycn/await进行简化
//2.使用解构赋值，从axios封装的大象中，把data属性解构出来
//3.把解构出来的data属性，使用冒号进行重命名，一般都重命名为{ data : res}
	const{ data: res} = await axios({
		method:'GET',
		url:'http://101.43.89.105:8866/stu/student/listVue'
	})
	console.log(res.data)
})

【GET】第三种方式axios.get()

document.querySelector("#btnGet").addEventListener('click',async function(){
            const {data : res} = await                                              axios.get('http://101.43.89.105:8866/stu/student/listVue',{
                params: { id: 1}
            })
            console.log(res)
        })

【POST】请求案例-第一种方式

<body>
    <button id="btnPost">发送Post请求button>
    <script src="./lib/axios.js">script>
    <script>
       document.querySelector("#btnPost").addEventListener("click", async function(){
            const {data} = await axios({
                method: 'POST',
                url: 'http://localhost:8866/stu/student/listVuePost',
                data: {
                    name: 'zs',
                    height: 20
                }
            })
            console.log(data)
        })
    script>
body>

【POST】第二种方式axios.post()

document.querySelector("#btnPost1").addEventListener('click',async function(){
            const {data : res} = await axios.post('http://101.43.89.105:8866/stu/student/listVuePost',{name:'ZS',height: 20})
            console.log(res)
        })

5.Vue-cli 5.1.Vue-cli介绍【概念】vue-cli是vue.js开发的标准工具。简化了程序员基于webpack创建工程化的Vue项目的过程。 5.2.Vue-cli安装【安装】vue-cli是npm上的一个全局包，使用npm install 命令，即可安装到电脑上：【命令】全局安装命令：启动电脑dos窗口执行即可

//此命令安装需谨慎——连接美国服务器--特别特别慢--最好不使用此命令
npm install -g @vue/cli
//验证vue版本命令：
vue -V

【安装使用如下方式】

//1.使用淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
//2.安装vue文件
cnpm install vue 
//3.安装vue脚手架--均安装最新版的
cnpm install -g @vue/cli
cnpm install -g @vue/cli-init
//4.再安装一些配置，使用如下命令
vue init webpack myproject  
-------------------跳出选项需要回答几个问题如下----------------------------
//Project name (learn_vue_cli)： -----项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）。
//Project description (A Vue.js project)： ----项目描述，也可直接点击回车，使用默认名字。
//Author ()： ----作者，输入你的大名，也可以直接回车。
//接下来会让用户选择：
//Runtime + Compiler: recommended for most users 运行加编译，直接回车即可。
//Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
//Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。
//Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，直接y回车。
//Setup unit tests ? (Y/n) 是否安装单元测试，选择安装y回车。
//Pick a test runner? 直接回车即可。
//Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ，选择安装y回车。
//Should we run 'npm install' for you after the project has been created?直接回车即可。

【使用】基于vue-cli快速生成工程化的vue项目：

vue create 项目的名称
//一般建议选择最后一个自定义创建项目组件

【选择要安装的组件】
【选择CSS处理器】
【选择配置文件存放目录】独立存放配置文件信息
【配置保存】选择是否保存本次配置的信息
【项目创建成功】
5.3.Vue项目的运行流程

【运行】通过main.js把App.vue渲染到index.html的指定区域中。

App.vue用来编写待渲染的模板结构。index.html中需要预留一个el区域。main.js把App.vue渲染到了index.html所预留的区域中。

//1.导入vue这个包，得到Vue构造函数
import Vue from 'vue'
//2.导入App.vue根组件，将来要把App.vue中的模板结构，渲染到HTML页面中
import App from './App.vue'
Vue.config.productionTip = false
//3.创建Vue实例对象
new Vue({
  //el:"#app",
  //把render函数指定的组件，渲染到HTML页面中
  render: h => h(App),
}).$mount("#app") //使用这个属性替代el属性

5.4.vue组件化开发【概念】vue是一个支持组件化开发的前端框架。【规定】组件的后缀名是.vue。之前接触到的App.vue文件本质上就是一个vue的组件。【构成】vue组件的三个组成部分： template-》组件的模板结构script-》组件的JavaScript行为style-》组件的样式【代码】案例

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/940185.html

Vue学习基础版汇总V2.0.0

发表评论

评论列表（0条）