Vue入门

内容概括

es6基本操作

es6语法
//const
//{#模板字符串#}
函数（箭头函数）
js类(JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。)
es6的构造类方法

vue的基本用法

vue引入
vue使用方法

Vue的指令系统

v-text和v-html
methods（这是一个方法不可以点使用 直接调用函数名传参即可（他是data的同级别 我搞错了））内放函数
v-if和v-show
v-bind 和v-on （ v-bind和v-on的简便写法 : @）
MVVM //数据驱动视图 设计模式 MVVM Model View ViewModel
v-for
watch监听器（侦听器）
computed（侦听器多个或单个属性）
轮播图（全自动版）
vue中使用ajax （重要）

  1. created()在实例创建完成后被立即调用（是方法（）{} 钩子函数 实例化完成立即触发，）
  2. //组件创建完成， ajax vue的钩子函数 与methods同级别

音乐播放器（使用的是 computed 侦听器）

es6基本操作

es6语法

eg：//{#console.log(a);#}
	//{#    var a=1;            //var全局声明   let局部声明#}       注释记得注释干净
	//{#console.log(a);#}
    
//{（一个大括号   就是一个作用域 ）
   （let不会存在变量提升）
   变量提升：（就是var运行后的效果会提出作用域全局声明）  
   let 变量不能重复声明  var可以重复声明}

//let（特点）：
	1.局部作用域
	2.（let不会存在变量提升）	
	3.let 变量不能重复声明


eg：	例题
        var a = [];
        for (var i = 0; i < 10; i++) {				修改var为let即可  （本题原因变量提升）
          a[i] = function () {
            console.log(i);
          };
        }
        a[6](); // 10
//const
 1.局部中作用域，
    	 2.不会i纯在变量提升  

       	 3. 不能重复声明 只声明常量或不可变的量  不可修改（改变）
//
  let name='未来';
   let str=`握是${name}`  
   console.log(str)
   模板替换
函数（箭头函数）
    let add1=function(x){
        return x
    }
    console.log(add1(5))        写法一					相同的结果

    let add=(x) => x;
    console.log(add(10))        写法二	（推荐）

    let add3=x => x;		    写法三   （不宜阅读   传形参并且有返回值的就记下即可）
    console.log(add3(15)) 

使用位置：eg：

    ①       var person={                //这是一个对象 （类似py中的字典）
                name:"奶奶的",
                age:30,
                fav:function () {
                    console.log(this)               //this指向当前对象
                    console.log(this.name)
                }
            }
            person.fav()        //支持同类py类方法的调用
	
（声明let较好 但是使用var一并没有影响）
    
    ②	    let person={                //这是一个对象 （类似py中的字典）
        name:"奶奶的",
        age:30,
        fav:()=> {              //这种写法会改变this的指向
            console.log(this)    //this指向发生了改变。this指向 定义person2的父级对象（上下文）
            console.log(this.name)
           }
   }
     person.fav()        //支持同类py类方法的调用
        
        
     （对象的单体模式）   
    ③       let person={                //这是一个对象 （类似py中的字典）
                        name:"奶奶的",
                        age:30,
                        fav(){
                            console.log(this)
                      }
     //上面用法同这个     fav:function(){}
                    }
                    person.fav();       //支持同类的调用
    	
（更加简单 ）

js类(JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。)

    function Person(name,age) {      //定义名字记得大写
        this.name=name;
        this.age=age;
    }
    //基于原型给对象声明方法（prototype方法） (给自定义的每一个person对象 都塞一个方法 方法如下  )
    只要继承于person的都有我定义的方法（继承性）
    	原型 prototype 当前类的父类（继承性）
    Person.prototype.showName=function(){
        console.log(this.name)
    }
    Person.prototype.nidayede=function(){
        console.log(this.age)
    }


    let p1=new Person('alex','30');  //实例化对象
    console.log(p1)
    console.log(p1.showName())
    console.log(p1.nidayede())

自我理解如同一个类的方法 元类的塞方法进去一样

es6的构造类方法

<script>
//es6构造 类  （不是vue）
    class Vue{
                    //可以默认传值也可以  实例化时传值
        constructor(name='alex',age=18) {           //类似__init__
            this.name=name;
            this.age=age

        }

        showname(){                       //类似py 方法中的def  showname
            console.log(this.name)        //
        }
        showage(){
            console.log(this.age)
        }
    }
    let v=new Vue();    //在es6中需要使用new来实例化对象     // 等同于 python中的实例化对象
    v.showname()

</script>

vue的基本用法

vue的介绍
vue的模板语法
vue的思想=数据驱动视图
vue的基本指令

image

前后端分离架构图

vue引入

cdn方式

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

下载开发版（导包）

查看是否安装成功（浏览器js控制编码台 直接输入 Vue 有数据即可 ,开发版:min.js与直接copy的CDN网页内用容添加到 js文件中 显示的效果不一样）用csript进行导入

vue使用方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--模板语法（插值语法）-->
    <h1>{{ msg }}</h1>              <!--种植进去-->
    <h2>{{ 'dhaudhuadu'}}</h2>     <!--字符串的就不用去数据中找了-->
    <h3>{{ 1+1 }}</h3>     <!--可以任意运算  分隔等方法都可以-->
    <h4>{{ {'name':'alex'} }}</h4>      <!--可以插入对象-->
    <h5>{{  person.name  }}</h5>
    <h2> {{ 1>2?'真的':'假的' }}</h2>           <!--前端三元运算符-->
    <p>{{ msg2.split('').reverse().join('') }}</p>      <!--去除空格什么都不用加  分割成叔祖后进行翻转-->
</div>

<script>
    //实例化对象       {对象}
    new  Vue({
        // elmemt(简写)
        el:'#app',  //指定目的地在哪(承包了一块区域)                      前两个传输书必须的
        data:{             //数据属性 //(区域内种东西 )
            msg:'黄瓜',
            person:{
                name:'alex'
            },
            msg2:'hello vue'
        }
    })

</script>

</body>
</html>

Vue的指令系统

v-text和v-html
v-text相当于innerText
v-html相当于innerHTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--<div id="app">-->      不可拿去别人的data 是哪去不到的  可以自己重新定义一个
    <!--{{ msg }}-->

<!--</div>-->
<div id="content">
    {{ msg }} 
    <div v-text="msg"></div>                    v-text   辅助模板语法的使用的             
    <div v-html="msg"></div>					v-html   渲染使用  
</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>
//    new Vue({
//      el:'#app',
//    })
    new Vue({
        el:'#content',
        data () {                   前面有解释此用法
            //data中是一个函数 函数中return一个对象，可以是空对象 但不能不return
            return {
                msg:"<h2>alex</h2>"
            }
        }
    })
</script>

</body>
</html>
methods（这是一个方法不可以点使用 直接调用函数名传参即可（他是data的同级别 我搞错了））内放函数
<div id="axx">{{ add(2,6) }}</div>    //直接使用   结果8

<script>  
new Vue({                   //声明Vue是必须滴  如同ajax一样$.ajax
        el:'#axx',
        data() {
            return {}   //可以为空但是不能不return
            },
        methods:{   //这是一个方法不可以点使用  直接调用函数名传参即可（他是data的同级别 我搞错了）
         	add(x,y){
           	return x+y         //定义函数后必须要有返回值  *（不然返回undefind使用未定义类作为）
             }
            }
        }
    )
</script>

v-if和v-show

v-show 相当于 style.display v-else
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>

<div id="content">
    {{ add(2,3) }}
    <button v-on:click='handlerClick'>隐藏</button>
    <div class="box" v-show='isShow'></div>			//不可乱指定 没有声明的属性
    <div class="box2" v-if="isShow"></div>

    <div v-if="Math.random() > 0.5">						//Math.random()随机数
        有了
    </div>
    <div v-else>											//上面条件不成立执行
        没了
    </div>

</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>
    //数据驱动视图
    new Vue({
        el: '#content',
        data() {
            //data中是一个函数 函数中return一个对象，可以是空对象 但不能不return
            return {
                msg: "<h2>alex</h2>",
                num: 1,
                isShow: true
            }
        },
        methods: {
            add(x, y) {
                console.log(this.num);
                return x + y
            },
            handlerClick() {
                //数据驱动
                console.log(this);
                this.isShow = !this.isShow;

            }
        }
    })
</script>

</body>
</html>
v-if和v-show.html

v-if和v-show的区别

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-bind 和v-on （ v-bind和v-on的简便写法 : @）

    //声明式的JavaScript框架   可以直接看出来 

l<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .active{
            background-color: green;
        }

    </style>
</head>
<body>

<div id="app">
    <!--<button v-on:click = 'handlerChange'>切换颜色</button>-->
   <!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->
    <!--<img v-bind:src="imgSrc" v-bind:alt="msg">-->
    <!--<div class="box" v-bind:class = '{active:isActive}'></div>-->

     <button @mouseenter = 'handlerChange' @mouseleave = 'handlerLeave'>切换颜色</button>
   <!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->
    <img :src="imgSrc" :alt="msg">
    							//定义对象 为true添加到类  false 移除类
    <div class="box" :class = '{active:isActive}'></div>
</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>
    //数据驱动视图  设计模式 MVVM  Model  View  ViewModel

    //声明式的JavaScript框架

//    v-bind和v-on的简便写法 :  @
    new Vue({
        el: '#app',
        data() {
            //data中是一个函数 函数中return一个对象，可以是空对象 但不能不return
            return {
                imgSrc:'./1.jpg',
                msg:'美女',
                isActive:true
            }
        },
        methods:{
            handlerChange(){
//                this.isActive = !this.isActive;
                this.isActive = false;
            },
            handlerLeave(){
                this.isActive = true;
            }
        }
       
    })
</script>

</body>
</html>

v-bind和v-on.html

MVVM //数据驱动视图 设计模式 MVVM Model View ViewModel

image

v-for

v-for可以遍历列表，也可以遍历对象,在使用vue的v-for指令的时候，一定要绑定key,避免vue帮咱们计算DOM

便利的结果
<li v-for = '(item,index) in data.users' :key="item.id" >会得到两个值  前数据 后位置
<div v-for = '(value,key) in person'> 前是值后是key

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .active {
            background-color: green;
        }

    </style>
</head>
<body>

<div id="app">
    <ul v-if="data.status === 'ok'">
        <!--v-for的优先级是最高的     diff算法-->   //类似标识  没id 邦index
        <li v-for = '(item,index) in data.users' :key="item.id" >
            <h3>{{ item.id }} -- {{ item.name }} -- {{ item.age }}</h3>
        </li>
    </ul>
    				值在前  key在后
    <div v-for = '(value,key) in person'>
        {{ key }}-----{{ value }}
    </div>
</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>

    new Vue({
        el: '#app',
        data() {

            return {
                data: {
                    status: 'ok',
                    users: [
                        {id: 1, name: 'alex', age: 18},
                        {id: 2, name: 'wusir', age: 30},
                        {id: 3, name: 'yuan', age: 48}
                    ]
                },
                person:{
                    name:'alex'
                }
            }
        },
        methods: {}

    })
</script>

</body>
</html>

（观察者）监听者（opserver 监听data）当监听data内的数据改变会触发相应的渲染改变（打印当前this即可看见 )$是用于区分 自定的属性 或Vue自带的方法（进行划分）

image

下午 （明早8：30来学习）

watch监听器（侦听器）

可以监听单个属性 想监听多个的话多声明几个

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../vue.js"></script>
<div id="app">
    {{ name }} -- {{ age }}
    <button @click="clickHandler">修改</button>
</div>

<script>
    new Vue({
        el:'#app',
        data(){
            return{
                name:'cj',
                age:18
            }
        },
        methods:{
            clickHandler(){
                this.name='xushuo';
                this.age=28
            }
        },
         //watch单个属性，如果想监听多个属性 声明多个属性的监听
        watch: {   当数据属性发生改变 watch立马进行监听
            // 监听nam属性,后面对应的是一个方法
            'name':function (value) {	//value随意自己接收  （value监听到的改变后的属性传到里面去）
                console.log(value);
                this.name = '大武sir'
            },
            // 监听age属性,后面对应的是一个方法
            'age'(value){   //value随意自己接收
                this.age = 18
            }
        }
    })
</script>


</body>
</html>

computed（侦听器多个或单个属性）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../vue.js"></script>
<div id="app">
    {{ Myfun }}
    <button @click="clickHandler">修改</button>
</div>

<script>
    new Vue({
        el:'#app',
        data(){
            return{
                name:'alex',
                age:18
            }
        },
        methods:{
            clickHandler(){
                this.name='wusir';
                this.age=28
            }
        },
        // 计算属性
        computed:{  //监听多个 
            //业务逻辑
            
            // Myfun 自定义的方法名
            Myfun(){
                
                return `我的名字是${this.name},今年${this.age}岁了`
            }
        }
    })
</script>
</body>
</html>

轮播图（全自动版）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>

<div id="app">
    <img :src="imgs[currentIndex].imgSrc" alt="">

    <button @click="prevHandler">上一张</button>
    <button @click="nextHandler">下一张</button>

</div>

<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                imgs: [{'id': 1, 'imgSrc': './imgs/1.gif'},
                    {'id': 2, 'imgSrc': './imgs/2.jpg'},
                    {'id': 3, 'imgSrc': './imgs/3.gif'},
                    {'id': 4, 'imgSrc': './imgs/4.jpg'}],
                currentIndex: 0
            }
        },
        methods: {

            nextHandler() {
                this.currentIndex++;
                if (this.currentIndex > 3) {
                    this.currentIndex = 0
                }

            },
            prevHandler() {
                this.currentIndex--;
                if (this.currentIndex < 0) {
                    this.currentIndex = 3
                }
            },

        },
       	 created()在实例创建完成后被立即调用
         //组件创建完成后 created()   vue的钩子函数
        created() {----------------------------------------推荐
            //涉及到指向 能用箭头函数解决 不要使用匿名函数
            // 计时器方法setInterval  
            setInterval(()=> {
                // 函数里面套函数,闭包,这里改变this指向问题,所以采用了箭头函数
                 this.currentIndex++;
                if (this.currentIndex > 3) {
                    this.currentIndex = 0
                }
            },2000)
        },
 第二种解决思路不推荐------------------------------------------------------不推荐
        created() {
          	let _this=this  局部声明this是当前vm对象
            setInterval(function(){
                // 函数里面套函数,闭包,这里改变this指向问题,所以采用了箭头函数
                 console.log(_this):
            },2000)
        }---------------------------------------------------------------------
		
    })
</script>


</body>
</html>
轮播图点击事件的e
nextHandler(e) {		每个事件都有一个event参数只不过被忽略了而已
e.target			可以拿到当前目标对象
}			还有很多参数     js事件的冒泡什么的都也有运用

外谈（组件会将）
this当前实例化对象

vue中使用ajax （重要）

    created()在实例创建完成后被立即调用
    //组件创建完成， ajax   vue的钩子函数    与methods同级别

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        span.active{
            color:red;
        }
    </style>

</head>
<body>
<div id="app">
   <div>
       <span @click = 'handlerClick(index,category.id)' v-for = '(category,index) in categoryList' :key = 'category.id' :class = '{active:currentIndex==index}'>
           {{category.name}}
       </span>

       <ul>
           <li></li>
       </ul>
   </div>
</div>
<script src="./vue.js"></script>
<!--axios-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                categoryList:[],
                currentIndex:0
            }
        },
        methods: {
            handlerClick(i,id){
                this.currentIndex = i;
                //发起请求
                $.ajax({
                    url:`https://www.luffycity.com/api/v1/courses/?sub_category=${id}`,
                    type:'get',
                    success:(data) => {
                       var data = data.data;
                       console.log(data);
                    }

                })

            }

        },
        created()在实例创建完成后被立即调用
        //组件创建完成， ajax   vue的钩子函数    与methods同级别
        created() {
            //this指向问题  能用箭头函数 不要用匿名函数

            $.ajax({
                		//接口获取后端传输过来的数据
                url:"https://www.luffycity.com/api/v1/course_sub/category/list/",  
                type:"get",
                success: (data) => {
                    console.log(data);
                    if (data.error_no === 0){
                        var data = data.data;
                        let obj = {
                            id:0,
                            name:'全部',
                            category:0
                        }
                        this.categoryList = data;
                        this.categoryList.unshift(obj)

                    }
                },
                error:function (err) {
                    console.log(err);
                }
            })

        }
    })
</script>
</body>
</html>

vue中使用ajax

音乐播放器（使用的是 computed 侦听器）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        ul li.active{
            background-color: darkcyan;
        }
    </style>
</head>
<body>
<div id="music">
    <!--@ended 播放完成 会自动调用该方法-->
    <audio :src="currentSong" controls autoplay @ended = 'nextHanlder'></audio>
    <ul>
        <li @click = 'songHandler(index)' v-for = '(item,index) in musicData' :key="item.id" :class = '{active:index===currentIndex}'>
            <h2>歌手：{{ item.author }}</h2>
            <p>歌名：{{ item.name }}</p>
        </li>
    </ul>
</div>
<script src="./vue.js"></script>
<script>
    var musicData = [{
        id: 1,
        name: '于荣光 - 少林英雄',
        author: '于荣光',
        songSrc: './static/于荣光 - 少林英雄.mp3'
    },
        {
            id: 2,
            name: 'Joel Adams - Please Dont Go',
            author: 'Joel Adams',
            songSrc: './static/Joel Adams - Please Dont Go.mp3'
        },
        {
            id: 3,
            name: 'MKJ - Time',
            author: 'MKJ',
            songSrc: './static/MKJ - Time.mp3'
        },
        {
            id: 4,
            name: 'Russ - Psycho (Pt. 2)',
            author: 'Russ',
            songSrc: './static/Russ - Psycho (Pt. 2).mp3'
        }
    ];

    new Vue({
        el: '#music',
        data() {
            return {
                musicData:[],
                currentIndex:0
            }

        },
        computed:{
          currentSong () {

              return this.musicData[this.currentIndex].songSrc
          }
        },
        methods:{
            songHandler(i){
                this.currentIndex = i;
            },
            nextHanlder(){
                this.currentIndex++;
            }
        },

        created(){
            this.musicData = musicData
        }
    })
</script>
</body>
</html>
posted @ 2021-06-13 23:06  欧阳锦涛  阅读(43)  评论(0)    收藏  举报
TOP 底部