Vue

最新推荐文章于 2022-01-12 10:31:03 发布

Ra'sAIGhul

最新推荐文章于 2022-01-12 10:31:03 发布

阅读量637

点赞数 1

本文链接：https://blog.csdn.net/ltz18235608990/article/details/108263169

版权

vue

尤雨溪 -- 2014年发布

react、angular.js

jquery ，让dom操作更简单、更快速

使用ES6

参考:

	Es6 基本教程：https://es6.ruanyifeng.com/

	vue博客https://www.cnblogs.com/clschao/articles/10706528.html

es6基本语法

各大浏览器都支持了

声明变量

var a = 'xx' //es5
let b = 'oo' //es6

let 声明变量的特点
  1 不在从属于顶层对象window
 	let username = 'chao'
	window.username;
	结果：undefined

  2 变量不能在var重复声明
  3 不存在变量提升
		console.log(hh2);
		var hh2 = 'ss';
		结果： undefined
		
		console.log(hh);  // 报错
		let hh = 'ss';

const声明常量，不能修改
	const Pi = 3.1415926....
	const Pi = 11 //报错

模板语法
let a = 'xx'
let name = `${a}oo`
name：结果"xxoo"

es5和es6的函数对比

// es5
function add(x,y){
   return x+y
}
add(1,2);
// 匿名函数
var add = function(x){
  return x
}
// es6 
// 匿名函数
let add = function(x){
  return x
}
// 箭头函数
let add = (x) => {
	return x
}
// 简写形式
let add = x => x ; 
let add = (x,y) => x+y

自定义对象中封装函数的写法

// es5中自定义对象里面封装函数
var name = '王振'
var person = {
  name:'刘伟',
  age:18,
  f1:function(){
		console.log(this);
		console.log(this.name); // 
	}
  
}
person.f1()

// 箭头函数 -- var
var name = '王振'
var person = {
  name:'刘伟',
  age:18,
  f1:()=>{
		console.log(this);
		console.log(this.name); // 
	}
  
}
person.f1()
// 箭头函数 -- es6
let name = '王振'
let person = {
  name:'刘伟',
  age:18,
  f1:()=>{
		console.log(this); // Window {parent: Window, opener: null, top: Window, length: 2, BigInt: ƒ, …}
		console.log(this.name); // undefined
	}
  
}
person.f1()

// 函数单体模式
let name = '王振'
let person = {
  name:'刘伟',
  age:18,
  //f1:function(){
  f1(){ //不会改变this的指向
		console.log(this);
		console.log(this.name); // 
	}
  
}
person.f1()

es5和es6中类写法

// es5 没有类的概念,写法
function Person(name,age){
	this.name = name;  // 类似于self
  this.age = age;
}
// 使用
var p1 = new Person('杨浩', 16);
p1.name;
	结果："杨浩"
// es5封装方法,原型链
Person.prototype.f2 = function(){console.log('xxxxxx')};
p1.f2();  // 结果'xxxxxx'

//es6  class声明类(了解)
class Person2{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    
    showName(){console.log(this.name)};
    
};

let p3 = new Person2('汉子',16);
  p3.name;
  "汉子"
  p3.showName();
  汉子

vue简单使用

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

安装：https://cn.vuejs.org/v2/guide/installation.html

下载vue.js，然后引入使用

简单示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">

    <h1>{{ name }}</h1>

</div>

</body>
<!--var h1Ele = document.getElementByTagName('h1')-->
<!--h1Ele.innerText = 'xx'-->

<!--$('h1').text('xx')-->

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

    let vm = new Vue({
        el:'#app', //值为css选择器，多数都使用id属性的值， vue圈地，圈的地里面才能使用vue的语法，外面不能用
        data:{ // 数据属性
            name:'王振',
        }
        
    })

</script>

</html>

视图中简单语法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">

    <h1>{{ name }}</h1>
    <h1>{{ meinv.split('').reverse().join('') }}</h1>  <!-- 字符串翻转 -->
    <h1>{{ num }}</h1>
    <h1>{{ num+1 }}</h1>  <!-- 四则运算 -->
    <h1>{{ 1+1 }}</h1>  <!-- 四则运算 -->
    <h1>{{ '1+1' }}</h1>
    <h1>1+1</h1>
    <h1>{{ info }}</h1>
    <h1>{{ info.name }}</h1>  <!-- 属性取值 -->
    <h1>{{ 1>2?'真':'假' }}</h1>  <!-- 三元运算、三目运算 -->
    <h1>{{ num>2?'真':'假' }}</h1>
    <h1>{{ hobby_list }}</h1>

</div>

</body>
<!--var h1Ele = document.getElementByTagName('h1')-->
<!--h1Ele.innerText = 'xx'-->

<!--$('h1').text('xx')-->

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

    let vm = new Vue({
        el:'#app', //值为css选择器，多数都使用id属性的值， vue圈地，圈的地里面才能使用vue的语法，外面不能用
        data:{ // 数据属性
            name:'王振',
            num:100,
            meinv: 'simin',
            info:{
                name:'xx',
                age:'18'
            },
            hobby_list:[
                '美女','帅哥',
            ]
        }

    })


</script>

</html>

通过vm对象获取vue的属性

    vm.$el;
    vm.$data;
    vm.$data.hobby_list;

vue指令系统

以标签属性的方式来写，语法: 指令系统=''值"

文本操作

v-text和v-html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
    
    <div id="app">
        <p>
            {{ aele }}
        </p>
        <p v-text="aele">
    
        </p>
        <p v-html="aele">
    
        </p>
        <p v-html="name">
            
        </p>
    
    </div>
    </body>
    
    <script src="vue.js"></script>
    <script>
    
        let vm = new Vue({
            el:'#app', //值为css选择器，多数都使用id属性的值， vue圈地，圈的地里面才能使用vue的语法，外面不能用
            data:{ // 数据属性
                name:'王振',
                aele:'<a href="">百度</a>',
                num:100,
                meinv: 'simin',
                info:{
                    name:'xx',
                    age:'18'
                },
                hobby_list:[
                    '美女','帅哥',
                ]
            }
    
        })
    
    
    </script>
    
    </html>

条件渲染

v-if 和 v-show

v-if  条件判断

    <div id="app">
       <h1 v-if="num>100">{{name}}</h1>
       <h1 v-else-if="num<100">{{name}}牛逼</h1>
       <h1 v-else>{{meinv}}</h1>
    
    </div>
    <script src="vue.js"></script>
    <script>
    
        let vm = new Vue({
            el:'#app', //值为css选择器，多数都使用id属性的值， vue圈地，圈的地里面才能使用vue的语法，外面不能用
            data:{ // 数据属性
                name:'王振',
                aele:'<a href="">百度</a>',
                num:100,
            }
    
        })
    
    
    </script>

v-show

控制标签显示或隐藏的

    <div id="app">
       <h1 v-show="num>100">{{name}}</h1>
       <h1>思敏</h1>
    
    </div>
    
    let vm = new Vue({
            el:'#app', //值为css选择器，多数都使用id属性的值， vue圈地，圈的地里面才能使用vue的语法，外面不能用
            data:{ // 数据属性
                name:'王振',
                aele:'<a href="">百度</a>',
                num:100,
               
            }
    
        })

v-if和v-show的区别

    v-if 控制标签生成或者去除的
    v-show 控制标签显示或者隐藏的
    频繁切换标签显示与否，尽量使用v-show，不会重组文档结构，那么切换起来效率高
    不频繁的可以用v-if，条件不成立，不会生成标签，渲染就快一些

属性绑定v-bind

动态属性

示例

    <div id="app">
       <p xx="meinv"></p>  <!-- 静态属性 -->
       <p v-bind:xx="meinv"></p> <!-- 动态属性 -->
       <p :xx="meinv"></p> <!-- 简写形式 -->
       <h1>思敏</h1>
    
    </div>
    
    let vm = new Vue({
            el:'#app', 
            data:{ 
                meinv: 'simin',
    
            }
    
        })

事件绑定v-on

示例
<div id="app">

   <h1 v-on:click="num++">思敏</h1>
   <h1 @click="num++">思敏</h1> <!-- 简写形式 -->
   <p>{{num}}</p>

</div>

let vm = new Vue({
        el:'#app', //值为css选择器，多数都使用id属性的值， vue圈地，圈的地里面才能使用vue的语法，外面不能用
        data:{ // 数据属性
            name:'王振',
            aele:'<a href="">百度</a>',
            num:100,
        }

    })

vue数据属性的写法

<script>

    let vm = new Vue({
        el:'#app', //值为css选择器，多数都使用id属性的值， vue圈地，圈的地里面才能使用vue的语法，外面不能用
        // data:{ // 数据属性
        //     name:'王振',
        //     aele:'<a href="">百度</a>',
        //     num:100,
        //     meinv: 'simin',
        //     info:{
        //         name:'xx',
        //         age:'18'
        //     },
        //     hobby_list:[
        //         '美女','帅哥',
        //     ]
        // }
        
      // 工作中就这么写
        data(){  // 这样写数据属性是最常用的方式，因为后面学和使用组件的功能时，必须要这样写数据属性
            return { // 数据属性
                name:'王振',
                aele:'<a href="">百度</a>',
                num:100,
                meinv: 'simin',
                info:{
                    name:'xx',
                    age:'18'
                },
                hobby_list:[
                    '美女','帅哥',
                ]
            }
        }

    })


</script>

v-model

双向数据绑定

数字加减示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">

    <button @click="num++">+</button>
<!--    <input type="text" :value="num">-->
    <input type="text" v-model="num">  <!-- 双向数据绑定 -->
    <button @click="num--">-</button>

    <p>{{num}}</p>
</div>

</body>

<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                num:10,
            }
        }


    })

</script>

</html>

vue的methods属性

声明方法的属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">

    <button @click="num++">+</button>
<!--    <input type="text" :value="num">-->
    <input type="text" v-model="num">  <!-- 双向数据绑定 -->
    <button @click="Handler">-</button>

    <p>{{num}}</p>
</div>

</body>

<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                num:10,
            }
        },
        methods:{
            // Handler:function () {
            //     //console.log(this.num);
            //     if (this.num > 0){
            //         this.num--;
            //     }
            //
            // }
            Handler() {
                //console.log(this.num);
                if (this.num > 0){
                    this.num--;
                }

            }

        }


    })

</script>

</html>

示例显示和隐藏wifi密码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">

    <input :type="type"> <button @click="show">{{xx}}</button>

</div>

</body>

<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                type:'password',
                xx:'显示密码'
            }
        },
        methods:{
            show(){
                if (this.type === 'password'){
                    this.type = 'text';
                    this.xx = '隐藏密码';
                }else {
                    this.type = 'password';
                    this.xx = '显示密码';
                }


            }
        }


    })

</script>

</html>

样式操作

class类值操作

方式1 (常用)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;
        }
        .c2{
            background-color: gold;
        }
    </style>
</head>
<body>

<div id="app">
    <button @click="status=!status">改变样式</button>
<!--    <div :class="{c1:status}" >-->
    <div :class="{c1:num===100,c2:status}" >
        思敏说ok
    </div>

</div>

</body>

<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                value:'c1',
                status:false,
                num:100,
            }
        },
        methods:{

        }


    })

</script>

</html>

方式2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;
        }
        .c2{
            background-color: gold;
        }
    </style>
</head>
<body>

<div id="app">
    <button @click="status=!status">改变样式</button>
    <div :class="status?'c1':'c2'" >
<!--    <div :class="{c1:num===100,c2:status}" >-->
<!--        思敏说ok-->
<!--    </div>-->
<!--    <div :class="[m1, m2]" >  &lt;!&ndash; 数组形式 &ndash;&gt;-->
        思敏说ok
    </div>
</div>

</body>

<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                value:'c1',
                status:false,
                m1:{'c1':true,},
                m2:{'c2':false,}
            }
        },
        methods:{

        }


    })

</script>

</html>

style样式操作

方式1
<div id="app">
    <button @click="">改变样式</button>
    <div :style="{backgroundColor: bgc, color:xcolor, fontSize:xfont + 'px'}">

        思敏说ok
    </div>
</div>
data(){
  return {
    xcolor:'greenyellow',
    bgc:'red',
    xfont:30
  }
},
  
方式2
<div :style="ss">

  思敏说ok
</div>
data(){
  return {
    ss:{
      color:'greenyellow',
      backgroundColor:'pink',
      fontSize:'30px'
    }
  }
},
  
方式3
<div :style="[ss1, ss2]">

  思敏说ok
</div>
data(){
  return {
    ss1:{
      color:'greenyellow',

      fontSize:'30px'
    },
    ss2:{
      backgroundColor:'pink',
    }
  }
},

选项卡示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #card{
            width: 500px;
            height: 350px;
        }
        .title{
            height:50px;
        }
        .title span{
            width: 100px;
            height: 50px;
            background-color:#ccc;
            display: inline-block;
            line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
            text-align:center;
        }
        .content .list{
            width: 500px;
            height: 300px;
            background-color: yellow;
            display: none;
        }
        .content .active{
            display: block;
        }

        .title .current{
            background-color: yellow;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>

    <div id="card">
        <div class="title">
            <span :class="{current:num===1}" @click="num=1">国内新闻</span>
            <span :class="{current:num===2}" @click="num=2">国际新闻</span>
            <span :class="{current:num===3}" @click="num=3">银河新闻</span>
            <!--<span>{{num}}</span>-->
        </div>
        <div class="content">
            <div class="list" :class="{active:num===1}">国内新闻列表</div>
            <div class="list" :class="{active:num===2}">国际新闻列表</div>
            <div class="list" :class="{active:num===3}">银河新闻列表</div>
        </div>
    </div>
    <script>
        // 思路：
        // 当用户点击标题栏的按钮[span]时，显示对应索引下标的内容块[.list]
        // 代码实现：
        var card = new Vue({
            el:"#card",
            data:{
                num:0,
            },
        });
    </script>

</body>
</html>

v-for循环指令系统

代码

循环数组：
<div id="app">
    <ul>
        <li :key="value.id" v-for="(value, index) in data_list">{{value.name}}--{{index}}</li>
        <!-- value是值，index是索引, :key是vue做的一个优化机制，提高页面渲染效率，并预防循环生成的标签出现顺序混乱的问题-->
    </ul>

</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
                data_list:[
                    {id: 1, name:'chao', age:18},
                    {id: 2, name:'wei', age:16},
                    {id: 3, name:'zhen', age:17},
                    {id: 4, name:'lin', age:17},
                ]
            }
        }
    })


</script>

循环自定义对象
<div id="app">

    <ol>
        <li v-for="(value,index) in info">{{value}}--{{index}}</li>
    </ol>

</div>

<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
                info:{
                    username:'云超',
                    hobby:'比基尼',
                },
                data_list:[
                    {id: 1, name:'chao', age:18},
                    {id: 2, name:'wei', age:16},
                    {id: 3, name:'zhen', age:17},
                    {id: 4, name:'lin', age:17},
                ]
            }
        }
    })


</script>

vue对象提供的属性功能

过滤器

和django的模板渲染中的过滤器干的事情是一样的


全局过滤器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">
    <h2>{{info.username|xie}}</h2>
</div>

</body>
<script src="vue.js"></script>
<script>
    // 全局过滤器
    Vue.filter('xie',function (val) {
        return val + 'xxoo谢晨'
    })


    let vm = new Vue({
        el:'#app',
        data(){
            return {
                info:{
                    username:'云超',
                    hobby:'比基尼',
                },
                username2:'刘伟',
                price:200,

            }
        },
        methods:{

        },


    })


</script>
</html>

局部过滤器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">
    <h1>{{info.username|true_man}}</h1>
    <h1>{{username2|true_man}}</h1>
    <h1>{{ price|yuan }}</h1>
    <h1>{{ price|yuan|true_man }}</h1>
</div>

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

    let vm = new Vue({
        el:'#app',
        data(){
            return {
                info:{
                    username:'云超',
                    hobby:'比基尼',
                },
                username2:'刘伟',
                price:200,

            }
        },
        methods:{

        },
        // 局部过滤器
        filters:{
            true_man:function (val) {
                return val + '真男人';
            },
            // 单体模式
            yuan(val) {
                return val + '元';
            }
        }


    })


</script>
</html>

计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">

    <h2>{{info.username|xie}}</h2>
    <h1>{{xx}}</h1>
</div>

</body>
<script src="vue.js"></script>
<script>
    // 全局过滤器
    Vue.filter('xie',function (val) {
        return val + 'xxoo谢晨'
    })


    let vm = new Vue({
        el:'#app',
        data(){
            return {
                info:{
                    username:'云超',
                    hobby:'比基尼',
                },
                username2:'刘伟',
                price:200,

            }
        },
        methods:{

        },
        // 局部过滤器
        filters:{

        },
        // 计算属性
        computed:{
            xx:function () {
               let s1 =  this.info.username + 'xxoo' + this.username2;
               return s1
            }

        }


    })


</script>
</html>

监听属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">
    <input type="text" v-model="num">

    <h1>{{num}}</h1>
    <button @click="info.username='xxx'">走你</button>
</div>

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


    let vm = new Vue({
        el:'#app',
        data(){
            return {
                info:{
                    username:'云超',
                    hobby:'比基尼',
                },
                username2:'刘伟',
                price:200,
                num:0,

            }
        },
        methods:{

        },
        // 局部过滤器
        filters:{

        },
        // 计算属性
        computed:{

        },
        watch:{
            'info.username':function (val) {
            // 'num':function (val) {
            // num:function (val) {
                console.log(val);


            }
        }

    })


</script>
</html>

生命周期钩子函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">
    <input type="text" v-model="num">

    <h1>{{num}}</h1>
    <button @click="info.username='xxx'">走你</button>
    <h1>{{info.username}}</h1>
</div>

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


    let vm = new Vue({
        el:'#app',
        data(){
            return {
                info:{
                    username:'云超',
                    hobby:'比基尼',
                },
                username2:'刘伟',
                price:200,
                num:0,

            }
        },
        // beforeCreate:function () {
        //
        //     console.log(this.$el); // undefined
        //     console.log(this.$data);  // undefined
        // },
        // // vue对象加载数据属性之后，执行,常用
        // created:function () {
        //     console.log(this.$el); // undefined
        //     console.log(this.$data);  // 数据
        //     // 这里就可以发请求，在加载页面时获取后台的数据来展示
        //     // $.ajax({
        //     //     ...
        //     //     res.data
        //     // })
        //
        // },
        // // 数据属性已经有值了，将数据挂载到视图中之前触发
        // beforeMount:function () {
        //     console.log('beforeMount>>>>')
        //     console.log(this.$el); // <h1>{{num}}</h1>
        //     console.log(this.$data);  // 数据
    // },
    // // 数据挂载到对应视图中之后，触发
    // mounted:function () {
    //     console.log('mounted>>>>')
    //     console.log(this.$el); // <h1>0</h1>
    //     console.log(this.$data);  // 数据
    // },

    // 了解
    // 某个视图发生变化之前触发，之后触发
    beforeUpdate:function () {
        console.log(this.$el.innerHTML); // <h1>0</h1>
        console.log(this.$data);  // 数据
    },
    updated:function () {
        console.log(this.$el.innerHTML); // <h1>0</h1>
        console.log(this.$data);  // 数据
    },
    

})

</script>
</html>

阻止事件冒泡和刷新页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 200px;
            width: 200px;
            background-color: greenyellow;
        }
        .c2{
            height: 100px;
            width: 100px;
            background-color: red;
        }
    </style>
</head>
<body>

<div id="app">
    <div class="c1" @click="fatherHandler">
        <!-- 阻止事件冒泡 -->
<!--        <div class="c2" @click.stop="sonHandler">-->
        <div class="c2" @click.stop.prevent="sonHandler">

        </div>
    </div>

    <!-- 阻止页面刷新 -->
    <form action="">
        <input type="text">
        <input type="submit" @click.stop.prevent="">
    </form>

    <a href="" @click.stop.prevent="">xx</a>

</div>

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


    let vm = new Vue({
        el:'#app',
        data(){
            return {
                info:{
                    username:'云超',
                    hobby:'比基尼',
                },
                username2:'刘伟',
                price:200,
                num:0,

            }
        },
        methods:{
            fatherHandler(){
                alert('父标签');
            },
            sonHandler(){
                alert('子标签');
            }
        }
    })
    
</script>
</html>

axios

文档：http://www.axios-js.com/zh-cn/docs/

    // 为给定 ID 的 user 创建请求
    axios.get('/user?ID=12345')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    
    // 上面的请求也可以这样做
    axios.get('/user', {
        params: {
          ID: 12345
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    
    axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

请求非同源的网站数据时，都有同源机制约束，cors跨域

组件化开发

vue开发时，let vm = new Vue({}),整个页面的大组件、根组件(root)

局部组件

三步：声子、挂子、用子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
        <div id="app">
            <!-- 用子 -->
            <App></App>
    
        </div>
    </body>
    <script src="../vue.js"></script>
    <script>
        // 声子
        let App = {
            data(){
                return {
                    appmsg:'我是app组件',
                }
            },
            template:`
                <div class="app">
                    <h1>{{appmsg}}</h1>
                </div>
            `,
    
        }
    
        let vm = new Vue({
            el:'#app',
            data(){
                return {
                    // appmsg:'xxxx'
                }
            },
            components:{
                // App:App, // 挂子
                App,
            }
        })
    
    
    </script>
    </html>

全局组件

声子、用子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
        <div id="app">
            <!-- 用子 -->
            <App></App>
            <num></num>
        </div>
    </body>
    <script src="../vue.js"></script>
    <script>
        // 声子  全局组件
        Vue.component('num',{
            data(){
                return {
                    nummsg:'我是全局num组件',
                    num:100,
                }
            },
            template:`
                <div class="app">
                    <h1>{{nummsg}}</h1>
                    <h1>{{num}}</h1>
                </div>
            `,
    
        })
    
    
        // 声子  局部组件
        let App = {
            data(){
                return {
                    appmsg:'我是app组件',
                }
            },
            template:`
                <div class="app">
                    <h1>{{appmsg}}</h1>
                </div>
            `,
    
        }
    
        let vm = new Vue({
            el:'#app',
            data(){
                return {
                    // appmsg:'xxxx'
                }
            },
            components:{
                // App:App, // 挂子
                App,
            }
        })
    
    
    </script>
    </html>

组件传值

父组件往子组件传值

两步：1 在父组件使用子组件的标签上加自定义属性

	2 在子组件中声明props属性来接受数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="app">
        <!-- 用子 -->
        <App></App>


    </div>
</body>
<script src="../vue.js"></script>
<script>

    // header footer section  main...不要和h5中的新标签名冲突
    let Vheader = {
        data(){
            return {
                msg:'我是vheader组件',
            }
        },
        template:`
            <div class="vheader">
                <button>{{msg}}</button>
                <h2>{{xx}}</h2>
            </div>
        `,
        props:['xx', ]
    }


    //<Vheader xx="30"></Vheader> 静态传值
    //<Vheader :xx="num"></Vheader> 动态传值
    // 声子
    let App = {
        data(){
            return {
                appmsg:'我是app组件',
                num:20,
            }
        },
        components:{
            Vheader,
        },
        template:`
            <div>

                <Vheader :xx="num"></Vheader>

            </div>

        `
    }

    let vm = new Vue({
        el:'#app',  //
        data(){
            return {
                // appmsg:'xxxx'
            }
        },
        components:{
            // App:App, // 挂子
            App,
        }
    })




</script>
</html>

子组件往父组件传值

两步

1 子组件中使用this.$emit('父组件的自定义事件名称',值)，

2 父组件中定义一个父组件的自定义事件名称对应的那个方法来接受数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="app">
        <!-- 用子 -->
        <App></App>


    </div>
</body>
<script src="../vue.js"></script>
<script>

    // header footer section  main...不要和h5中的新标签名冲突
    let Vheader = {
        data(){
            return {
                msg:'我是vheader组件',
                count:180,
            }
        },
        template:`
            <div class="vheader">
                <button>{{msg}}</button>
                <button @click="zouni">走你</button>
            </div>
        `,
        methods: {
            zouni(){
                this.$emit('fatherxx',this.count);
            }
        }
        // created(){
        //
        // }

    }

    // 声子
    let App = {
        data(){
            return {
                appmsg:'我是app组件',
                num:20,
                soncount:'',
            }
        },
        components:{
            Vheader,
        },
        template:`
            <div>
                <p style="color:red;">{{soncount}}</p>
                <Vheader @fatherxx="xx"></Vheader>

            </div>

        `,
        methods:{
            xx(val){
                this.soncount = val;
            }
        }

    }

    let vm = new Vue({
        el:'#app',  //
        data(){
            return {
                // appmsg:'xxxx'
            }
        },
        components:{
            // App:App, // 挂子
            App,
        }
    })


</script>
</html>

平行组件传值

三步

1 声明一个公交车

2 往公交车上放数据

3 从公交车上拿数据



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="app">
        <!-- 用子 -->
        <App></App>


    </div>
</body>
<script src="../vue.js"></script>
<script>

    let bus = new Vue();


    //
    Vue.component('v1',{
        data(){
            return {
                nummsg:'我是v1组件',
                num:100,
            }
        },
        template:`
            <div class="app">
                <h1>{{nummsg}}</h1>
                <h1>{{num}}</h1>
                <button @click="zouni">走你！</button>
            </div>
        `,
        methods:{
            zouni(){
                bus.$emit('v1xx',this.num);
            }
        }

    });
    Vue.component('v2',{
        data(){
            return {
                nummsg:'我是v2组件',
                num:120,
                v1num:'',
            }
        },
        template:`
            <div class="app">
                <h1>{{nummsg}}</h1>
                <h1>{{num}}</h1>
                <p style="color:blue;">{{v1num}}</p>
            </div>
        `,
        created(){ 
            bus.$on('v1xx', (val) => {
                // console.log(val);
                // console.log(this);
                this.v1num = val;
            })
        }

    })

    // 声子
    let App = {
        data(){
            return {
                appmsg:'我是app组件',
                num:20,
                soncount:'',
            }
        },

        template:`
            <div>
                <v1></v1>
                <v2></v2>

            </div>

        `,

    }

    let vm = new Vue({
        el:'#app',  //
        data(){
            return {
                // appmsg:'xxxx'
            }
        },
        components:{
            // App:App, // 挂子
            App,
        }
    })


</script>
</html>

vue-router

通过不同的访问路径，加载不同的组件到单页面中(那一个html文件)，vue做的叫做单页面应用(SPA).

文档：https://router.vuejs.org/zh/

大致流程

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

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


// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <App></App>

</div>

</body>

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

<script>

    // 第一步：
    Vue.use(VueRouter);  // 将VueRouter功能注入到Vue中

    // 第二步：写组件
    let home = {
        data(){
            return {
                msg:'我是home页面',
            }
        },
        template:`
            <div class="home">
                <h1>{{msg}}</h1>

            </div>
        `,

    }
    let spa = {
        data(){
            return {
                msg:'我是spa页面',
            }
        },
        template:`
            <div class="spa">
                <h1>{{msg}}</h1>

            </div>
        `
    }
    // 127.0.0.1:8000/home/
    // 127.0.0.1:8000/spa/


        // 声子
    let App = {
        data(){
            return {
                appmsg:'我是app组件',
                num:20,
                soncount:'',
            }
        },
        // a href='/home/'
        // 第六步：写连接，写出口
        template:`
            <div>
                <router-link to="/home/">首页</router-link>
                <router-link to="/spa/">spa页</router-link>

                <router-view></router-view>

            </div>

        `,

    }
    // 第三步：写路由规则
    const routes = [
        {path:'/home/', component:home, },
        {path:'/spa/', component:spa, },
    ]
    // 第四步：实例化vue-router对象
    let router = new VueRouter({
        routes,
    })

    // 第五步：挂载router对象
    let vm = new Vue({
        el:'#app',  //
        router,  //  挂载到vue对象上
        data(){
            return {
                // appmsg:'xxxx'
            }
        },
        components:{
            // App:App, // 挂子
            App,
        }
    })



</script>

</html>

vue-cli 脚手架

前面学习了普通组件以后，接下来我们继续学习单文件组件则需要提前先安装准备一些组件开发工具。否则无法使用和学习单文件组件。

一般情况下，单文件组件，我们运行在 自动化工具vue-CLI中，可以帮我们编译单文件组件。所以我们需要在系统中先搭建vue-CLI工具，

官网：https://cli.vuejs.org/zh/

nodejs npm --  python pip



Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)，node.js是一个js作为代码的后端语言，将浏览器的js代码解析器抽离出来了，作为自己node.js语言的解析器。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。因为这个vue cli脚手架的运行需要借助到node.js，所以要先安装node.js，通过脚手架进行开发的时候，前端就可以直接运行服务进行调试。

nvm工具的下载和安装：   https://www.jianshu.com/p/d0e0935b150a

                                              https://www.jianshu.com/p/622ad36ee020

安装记录:

打开:https://github.com/coreybutler/nvm-windows/releases

安装完成以后,先查看环境变量是否设置好了.



常用的nvm命令

nvm list   # 列出目前在nvm里面安装的所有node版本

nvm install node版本号      # 安装指定版本的node.js

nvm uninstall node版本号    # 卸载指定版本的node.js

nvm use node版本号          # 切换当前使用的node.js版本	



如果使用nvm工具，则直接可以不用自己手动下载，如果使用nvm下载安装 node的npm比较慢的时候，可以修改nvm的配置文件(在安装根目录下)

    # settings.txt
    root: C:\tool\nvm    [这里的目录地址是安装nvm时自己设置的地址,要根据实际修改]
    path: C:\tool\nodejs
    arch: 64
    proxy: none
    node_mirror: http://npm.taobao.org/mirrors/node/ 
    npm_mirror: https://npm.taobao.org/mirrors/npm/

安装node.js

Node.js是一个新的后端(后台)语言，它的语法和JavaScript类似，所以可以说它是属于前端的后端语言，后端语言和前端语言的区别：

- 运行环境：后端语言一般运行在服务器端，前端语言运行在客户端的浏览器上
- 功能：后端语言可以操作文件，可以读写数据库，前端语言不能操作文件，不能读写数据库。

我们一般安装LTS(长线支持版本)：

下载地址：https://nodejs.org/en/download/【上面已经安装了nvm，那么这里不用手动安装了】



node.js的版本有两大分支：

官方发布的node.js版本：0.xx.xx 这种版本号就是官方发布的版本

社区发布的node.js版本：xx.xx.x  就是社区开发的版本



Node.js如果安装成功，可以查看Node.js的版本,在终端输入如下命令：

    node -v  #v12.13.1

npm

在安装node.js完成后，在node.js中会同时帮我们安装一个npm包管理器npm。我们可以借助npm命令来安装node.js的包。这个工具相当于python的pip管理器。

npm install -g 包名              # 安装模块   -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list                        # 查看当前目录下已安装的node包
npm view 包名 engines            # 查看包所依赖的Node的版本 
npm outdated                    # 检查包是否已经过时，命令会列出所有已过时的包
npm update 包名                  # 更新node包
npm uninstall 包名               # 卸载node包
npm 命令 -h                      # 查看指定命令的帮助文档

安装Vue-cli

npm install -g vue-cli
npm install -g vue-cli --registry=https://registry.npm.taobao.org

如果安装速度过慢，一直超时，可以考虑切换npm镜像源：http://npm.taobao.org/

创建项目

vue init webpack 项目名称

按照提示输入和选择内容
按照提示，运行项目

npm run dev

数据接口

http://wthrcdn.etouch.cn/weather_mini?city=城市名称



安装模块

 npm install element-ui -S --registry=https://registry.npm.taobao.org

Ra'sAIGhul

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue

vue尤雨溪 -- 2014年发布react、angular.jsjquery ，让dom操作更简单、更快速使用ES6参考: Es6 基本教程：https://es6.ruanyifeng.com/ vue博客https://www.cnblogs.com/clschao/articles/10706528.htmles6基本语法各大浏览器都支持了声明变量var a = 'xx' //es5let b = 'oo' //es6let 声明变量的特点 1 不在
复制链接

扫一扫