vue--day01

es5和es6的介绍

es6基本语法

声明变量

      var a = 'xx';  //es5 用var声明不严谨
      let s = 'aa';  //es6 严谨 变量不能重复声明：先用let，后用var就会报错
      const Pi = 3.141592653;  //声明常量，不允许修改；

模板语法

      let a ='xx';
      let name = `$(a)oo`;

声明函数
es5中

function add(x,y){
       return x+y
}
add(1,2);
//匿名函数
var add = function(){
      return x
}

es6中

//匿名函数
let add = function(){
      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(); //刘伟

// es5和es6混合使用  箭头函数
var name = '小白'
var person = {
      name:'刘伟',
      age:18,
      f1:()=>{
      console.log(this);
      console.log(this.name);
      }
}
person.f1();//小白，找调用者的父级

//箭头函数 
let name = '王振'
let person ={
      name:'刘伟'，
      age:18,
      f1:()=>{
      console.log(this); //window对象
      console.log(this.name); //undefined 因为let不从属于window，所以拿不到值
}
}
person.f1();

函数单体模式

var name = '王振'
var person = {
      name:'刘伟',
      age:18,
      f1(){
      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('xx',18); //实例化的时候要new一下
取值
p1.name;

//es5类中封装方法   原型链
Person.prototype.f2 = function(){
    console.log(xxx);
}
调用方法
p1.f2();

//es6声明类和封装方法
class Person2{
    constructor(name,age){//相当于python中的构造方法
        this.name=name;
        this.age=age;
    }
    showName(){console.log(this.name)};//封装方法
}；
let p1 = new Person2('bb',18);
p1.name
p2.showName();

vue简单使用

简单示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 在外层标签div中引入id属性值,将来vuejs会通过该id,找到需要操作的元素  -->
    <div id="app">
    <!--在前端页面元素的部分,其中的内容暂时以插值表达式的形式来呈现  -->
    	<h1>{{ name }}</h1>
    </div>

</body>
<!-- 引入vuejs框架 -->
<script src="vue.js"></script>
<script>
    //当vuejs框架包导入进来之后,在浏览器缓存中,就已经存在了一个vue框架的构造函数
    // 我们new出来的这个vm对象,就是页面中对于模型和视图(数据和页面元素)的整体调度者
    let vm = new Vue({
        el:'#app', //el元素表现的是要指定为哪个标签进行相应的vuejs的操作
        data:{   //data是vuejs中对于数据的表达，数据约定俗称都是以json形式呈现
            name:'刘伟', //数据驱动视图
        }    
    
    })

</script>
</html>

通过vm对象获取vue的属性
```
vm.$el;
vm.$data;
vm.$data.name;
```

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

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

<script>
    let vm = new Vue({
        el:'#app',
        data:{
            aele:'<a href="">百度</a>',
        }
    })

</script>
</html>

条件渲染

v-if 和v-show

v-if 控制标签生成或者去除的

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

    <div id="app">
        <!-- 当num===100时显示name的值,等于80时显示elseif的值，否则显示else的值 -->
      <h1 v-if="num===100">{{ name }}</h1>
      <h1 v-else-if="num===80">{{ name }}牛逼</h1>
      <h1 v-else>{{ meinv }}</h1>
    </div>

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

<script>
    let vm = new Vue({
        el:'#app',
        data:{
            num:101,
            name:'刘伟',
            meinv:'simin',
            aele:'<a href="">百度</a>',
        }
    })

</script>
</html>

v-show 控制标签显示或隐藏

<body>

    <div id="app">
        <!-- 满足不满足条件都会生成标签 不满足时会有display=none的属性 -->
        <h1 v-show="num>100">{{ name }}</h1> 
        <h1 v-show="num<100">{{ name }}</h1>
    </div>

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

<script>
    let vm = new Vue({
        el:'#app',
        data:{
            num:101,
            name:'刘伟',
            meinv:'simin',
            aele:'<a href="">百度</a>',
        }
    })

</script>

v-if 和 v-show的区别

区别在于v-if不会生成标签，只会生成满足条件的那个标签。
v-show则是不管你满足不满足条件，都会生成标签，内部有display=None的属性。
频繁切换标签显示与否，尽量使用v-show,不会打乱文档结构
不频繁的可以使用v-if，条件不成立，不会生成标签，渲染就快些

属性绑定

v-bind

<body>

    <div id="app">
        <p xx='meinv'></p> <!-- 静态属性 -->
        <p v-bind:xx="meinv"></p> <!-- 动态属性可以获取到数据属性对应的值  -->
        <p :xx='meinv'></p>  <!-- 简写形式 -->
        <h1>思敏</h1>
    </div>

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

<script>
    let vm = new Vue({
        el:'#app',
        data:{
            meinv:'simin',
        }
    })

</script>

事件绑定

v-on

<body>

    <div id="app">
        <!-- 点击思敏,num自动+1 -->
        <h1 v-on:click="num++">思敏</h1>
        <h1 @click="num++">思敏</h1>  <!-- 简写形式 -->
        <p>{{ num }}</p>
    </div>

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

<script>
    let vm = new Vue({
        el:'#app',
        data:{
            num:100,
        }
    })

</script>

vue数据属性的写法

let vm = new Vue({
        el:'#app',
        /* 方式一
        data:{
            num:100,
            name:'刘伟',
            meinv:'simin',
            aele:'<a href="">百度</a>',
        }
        */
		//方式二
        data(){ //这样写数据属性最常用,后面使用组件时必须这样写
            return {
                 num:100,
                name:'刘伟',
                meinv:'simin',
                aele:'<a href="">百度</a>',
            }
        }
    })

</script>

示例数字加减使用到v-model 双项数据绑定

<body>

    <div id="app">
       <button @click="num++">+</button>
{#        <input type="text" :value="num">#}
        <!-- v-model相当于我在输入框输入的值会影响num，同时修改num也会影响输入框中的值 -->
        <input type="text" v-model="num"> <!-- 双项数据绑定 -->
       <button @click="num--">-</button>
    </div>

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

<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
                num:10,
            }
        }
    })

</script>

vue的methods属性

声明方法的属性

<body>

    <div id="app">
       <button @click="num++">+</button>
{#        <input type="text" :value="num">#}
        <!-- v-model相当于我在输入框输入的值会影响num，同时修改num也会影响输入框中的值 -->
        <input type="text" v-model="num"> <!-- 双项数据绑定 -->
       <button @click="Handler">-</button>
    </div>

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

<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
                num:10,
            }
        },
        methods:{ //放函数
            Handler() { //单体模式
                 if(this.num>0){
                     this.num--;
                 }
            }

        }

    })

</script>

示例显示和隐藏wifi密码

<body>

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

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

<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
                num:10,
                type:'password',
                xx:'显示密码',

            }
        },
        methods:{ //放函数
            show(){
                if (this.type==='password'){
                    this.type='text';
                    this.xx ='隐藏密码';
                }else{
                    this.type='password';
                    this.xx ='显示密码';
                }
            }
        }
    })

</script>

样式操作

控制class类值操作方式一

<body>

    <div id="app">
        <button @click="status=!status">改变样式</button>
       <!--  <div :class="{c1:status}"></div>  只要status为true,c1就会加到class中 -->
        <!-- 控制多个类值 -->
        <div :class="{c1:num===100,c2:status}">
            思敏说OK
        </div>

    </div>

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

<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
               value:'c1',
                status:false,
                num:100,
            }
        },
        methods:{ //放函数
        }
    })

</script>

方式二用的少

<body>

    <div id="app">
        <button @click="status=!status">改变样式</button>

        <div :class="[m1,m2]">
            思敏说OK
        </div>

    </div>

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

<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
               m1:{
                   'c1':true,
               },
                m2:{
                    'c2':true
                }
            }
        },
        methods:{ //放函数
        }
    })

</script>

控制style样式

方式一
<body>

    <div id="app">
        <button @click="">改变样式</button>
        <!-- 里面的样式只能用逗号连接不能用分号 backgroundColor去掉-并且Color大写-->
        <div :style="{ backgroundColor: bgc,color: xcolor,fontSize: xfont +'px' }">
            思敏说OK
        </div>

    </div>

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

<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
                xcolor:'green',
                bgc:'red',
                xfont:30, //字体大小只写个数字,px在样式上面拼接
            }
        },
        methods:{ //放函数
        }

    })

</script>


方式二
<body>

    <div id="app">
        <button @click="">改变样式</button>
        <!-- 里面的样式只能用逗号连接不能用分号 backgroundColor去掉-并且Color大写-->
{#        <div :style="{ backgroundColor: bgc,color: xcolor,fontSize: xfont +'px' }">#}
        <div :style="ss">
            思敏说OK
        </div>
    </div>

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

<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
               ss:{
                   color:'green',
                   backgroundColor:'red',
                   fontSize:'30px',
               }
            }
        },
        methods:{ //放函数
        }

    })

</script>
    
方式三  显示效果和方式二一样
<body>

    <div id="app">
        <button @click="">改变样式</button>
        <!-- 里面的样式只能用逗号连接不能用分号 backgroundColor去掉-并且Color大写-->
{#        <div :style="{ backgroundColor: bgc,color: xcolor,fontSize: xfont +'px' }">#}
        <div :style="[ss1,ss2]">
            思敏说OK
        </div>
    </div>

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

<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
               ss1:{
                   color:'green',
                   fontSize:'30px',
               },
                ss2：{
                backgroundColor:'red',
            }
            }
        },
        methods:{ //放函数
        }

    })

</script>

选项卡示例

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

<body>

    <div id="app">
        <ul>
            <!-- value为每个字典,index为索引下标 -->
            <!-- :key是vue做的一个优化机制 后续你修改数据属性的值的时候,
            再生成标签的时候就不会生成新的标签了,会用之前已经生成的标签
             提高页面渲染效率,并预防循环生成的标签出现顺序混乱-->
            <li :key="value.id" v-for="value,index in data_list">{{ value.name }}--{{ index }}</li>
        </ul>
        <ol>
            <!-- value为值,index为键 -->
            <li v-for="(value,index) in info">{{ value }}--{{ index }}</li>
        </ol>

    </div>

</body>
<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:19},
                    {id:3,name:'bai',age:20},
                    {id:4,name:'lin',age:21},
                ]
            }
        },
        methods:{ //放函数

        }

    })

</script>

vue对象提供的属性功能

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

全局过滤器

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

局部过滤器

<body>

    <div id="app">
        <!-- true_man对应的函数就会接收info.username的值 -->
        <h1>{{ info.username|true_man }}</h1>
        <h1>{{ username2|true_man }}</h1>
        <h1>{{ price|yuan }}</h1>

    </div>

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

<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
                info:{
                    username:'云超',
                    hobby:'比基尼',
                },
                username2:'刘伟',
                price:200,
            }
        },
        methods:{ //放函数

        },
        //局部过滤器 写在vue对象属性中
        filters:{ //过滤器
            true_man:function (val) {
                return val+'真男人';
            },
            //单体模式
            yuan(val){
                return val+'元'
            }
        }

    })

</script>

计算属性

<body>

    <div id="app">
        <h1>{{ xx }}</h1>  <!-- 返回值s1 -->
    </div>

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

<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
                info:{
                    username:'云超',
                    hobby:'比基尼',
                },
                username2:'刘伟',
                price:200,
            }
        },
        //计算属性
        computed:{
            xx:function () {
                let s1 = this.info.username + 'xxoo' + this.username2
                return s1
            }
        }

    })

</script>

监听属性实时监听某些数据从而做出一些反应

<body>

    <div id="app">
        <input type="text" v-model="num">
        <h1>{{ num }}</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,
            }
        },
        //监听属性
        watch:{
            num:function (val) {
                console.log(val)
            }
        }

    })

</script>

生命周期钩子函数

<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(this.$el); //拿到视图,但是相关属性还没有塞进去加载<h1>{{ num }}</h1>
            console.log(this.$data);//数据属性拿到了
        },
        //数据挂载到对应视图之后，触发
        mounted:function () {
            console.log(this.$el); //拿到视图,并且相关属性已经加载进去了
            console.log(this.$data); //数据属性拿到了
        },
        //了解
        //某个视图发生变化之前触发，之后触发,异步实现,所以出现顺序不一样可能
        beforeUpdate:function () {
            console.log(this.$el); //拿到是变化之后的el
            console.log(this.$el.innerHTML); //里面的内容是之前内容<h1>云超</h1>
            console.log(this.$data);
        },
        //变化后触发
        updated:function () {
            console.log(this.$el.innerHTML); //里面的内容是变化后的内容<h1>xxx</h1>
            console.log(this.$data);
        }

    })

</script>

阻止事件冒泡和刷新页面

<body>

    <div id="app">

        <div class="c1" @click="fatherHandler">
            <!-- 阻止事件冒泡 @click.stop 和 @click.stop.prevent用法一样-->
{#            <div class="c2" @click.stop="sonHandler"></div>#}
            <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>

综合示例要做的事情

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>todolist</title>
	<style type="text/css">
		.list_con{
			600px;
			margin:50px auto 0;
		}
		.inputtxt{
			550px;
			height:30px;
			border:1px solid #ccc;
			padding:0px;
			text-indent:10px;
		}
		.inputbtn{
			40px;
			height:32px;
			padding:0px;
			border:1px solid #ccc;
		}
		.list{
			margin:0;
			padding:0;
			list-style:none;
			margin-top:20px;
		}
		.list li{
			height:40px;
			line-height:40px;
			border-bottom:1px solid #ccc;
		}

		.list li span{
			float:left;
		}

		.list li a{
			float:right;
			text-decoration:none;
			margin:0 10px;
		}
	</style>
</head>
<body>
	<div class="list_con">
		<h2>To do list</h2>
		<input type="text" name="" id="txt1" class="inputtxt">
		<input type="button" name="" value="增加" id="btn1" class="inputbtn">

		<ul id="list" class="list">
			<!-- javascript:; # 阻止a标签跳转 -->
			<li>
				<span>学习html</span>
				<a href="javascript:;" class="up"> ↑ </a>
				<a href="javascript:;" class="down"> ↓ </a>
				<a href="javascript:;" class="del">删除</a>
			</li>
			<li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
			<li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
		</ul>
	</div>
</body>
</html>

-------------------------------------------

个性签名：代码过万，键盘敲烂！！！

如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，博主在此感谢！