1.vue-1

目录

• 1.es5和es6比较
  • es6的基本语法
  • es5和es6的函数对比
  • 自定义对象中封装函数的写法
    • this的指向问题
  • es5和es6的类写法对比（了解）
• 2. vue.js的快速入门使用
  • 1.1 vue.js库的下载
  • 1.2 vue.js库的基本使用
  • 1.3 vue.js的M-V-VM思想
• 2. Vue指令系统的常用指令
  • 2.1 文本指令v-html和v-text
  • 2.2 条件渲染指令v-if和v-show
  • 2.3 操作-绑定标签属性v-bind
  • 2.4 事件绑定v-on和methods属性
    • 例1:完成商城的商品增加减少数量
    • 例2:wifi密码切换显示
  • 2.5 操作样式
    • 2.5.1 控制标签class类名
    • 2.5.2 控制标签style样式
    • 2.5.3 实例-vue版本选项卡
  • 2.6 列表渲染指令v-for
  • 2.7 双向数据绑定v-model
• 3. Vue对象提供的属性功能
  • 3.1 过滤器
    • 3.1.1 使用Vue.filter()进行全局定义
    • 3.1.2 在vue对象中通过filters属性来定义
  • 3.2 计算和侦听属性
    • 3.2.1 计算属性computed
    • 3.2.2 监听属性watch
      • 示例:用户名长度限制
  • 3.3 vue对象的生命周期钩子函数
  • 3.4 阻止事件冒泡和刷新页面

1.es5和es6比较

es6的基本语法

var:声明变量不严谨 --- es5
let：声明变量严谨  --- es6

let特点：   
1.变量局部作用域有作用:if(){let a=11},大括号外拿不到a的值
2.不存在变量提升(先声明在使用)  
3.不能重复声明
4 let声明的全局变量不从属于window对象，var声明的全局变量从属于window对象。

关于第4个特点的简单说明：
	
	ES5声明变量只有两种方式：var和function。
	ES6有let、const、import、class再加上ES5的var、function共有六种声明变量的方式。
	
    还需要了解顶层对象：浏览器环境中顶层对象是window.
	ES5中，顶层对象的属性等价于全局变量。var a = 10; window.a 
	ES6中，有所改变：var、function声明的全局变量，依然是顶层对象的属性；let、const、class声明的全局变量不属于顶层对象的属性，也就是说ES6开始，全局变量和顶层对象的属性开始分离、脱钩，目的是以防声明的全局变量将window对象的属性造成污染，因为window对象是顶层对象，它里面的属性是各个js程序中都可以使用的，不利于模块化开发，并且window对象有很多的自有属性，也为了防止对window的自由属性的污染，所以在ES6中将顶层对象和全局变量进行隔离。
	举例：
		var a = 1;
		console.info(window.a);  // 1
		let b = 2;
		console.info(window.b); //undefined

模板字符串：tab键上面的反引号，${变量名}来插入值  
	let bb = 'jj';
	var ss = `你好${bb}`;
  console.log(ss); -- '你好jj'

const pi = 3.1415926; 声明常量： 特点和let一样，只不过const声明的量，是不可改变的量
const ：特点：  1.局部作用域  2.不存在变量提升  3.不能重复声明  4.一般声明不可变的量

es5和es6的函数对比

    //ES5写法
    function add(x){
        return x
    }
    add(5);
    //匿名函数
    var add = function (x) {
        return x
    };
		add(5);
    //ES6的匿名函数
    let add = function (x) {
        return x
    };
    add(5);
		

    //ES6的箭头函数,就是上面方法的简写形式
    let add = (x) => {
        return x
    };
    console.log(add(20));
    //更简单的写法，但不是很易阅读
    let add = x => x;
    console.log(add(5));
    多个参数的时候必须加括号，函数返回值还是只能有一个，没有参数的，必须写一个()
    let add = (x,y) => x+y;

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

this的指向问题

箭头函数改变this指向 -- 指向自定义函数父级对象

   // 1.es5 对象中封装函数的方法
    var name = '子俊';
    var person1 = {
        name:'超',
        age:18,
        f1:function () {  //在自定义的对象中放函数的方法
            console.log(this);//this指向的是当前的对象person1,{name: "超", age: 18, f1: ƒ}
            console.log(this.name)  // '超'
        }
    };
    person1.f1();  //调用函数

	// 2. ES6中自定义对象中来封装箭头函数,this指向person2父级对象
    var name = '子俊';
    var person2 = {
        name:'超',
        age:18,
        f1: () => {  
            console.log(this); //this指向的不再是当前的对象了，而是指向了person2的父级对象(称为上下文)，而此时的父级对象是我们的window对象，
            console.log(window); //还记得window对象吗，全局浏览器对象，打印结果和上面一样
            console.log(this.name)  // 子俊
        }
    };
    person2.f1();  //调用函数

    // 3. ES6中自定义对象中来封装箭头函数,this指向person3父级对象
    let name = '子俊'; 
    let person3 = {
        name:'超',
        age:18,
        f1: () => {  
            console.log(this); //this指向person3的父级对象，而此时的父级对象是我们的window对象，
            console.log(window); //还记得window对象吗，全局浏览器对象，打印结果和上面一样
            console.log(this.name)  // undefind,let声明的变量不属于Windows对象
        }
    };
    person3.f1(); //调用函数


    // 3.而我们使用this的时候，希望this是person对象，而不是window对象，单体模式写:
    let person4 = {
        name:'超',
        age:18,
        //f1:function(){}简写;
        f1(){  //相当于f1:function(){},只是一种简写方式,称为对象的单体模式写法,vue里面会看用到这种方法
            console.log(this);//this指向的是当前的对象person4,{name: "超", age: 18, f1: ƒ}
            console.log(this.name)  //'超'
        }
    };
    person4.f1()

es5和es6的类写法对比（了解）

<script>
    // 1. es5写类的方式
    
    function Person(name,age) {
        //封装属性,不能在里边声明方法
        this.name = name;  //this--Python的self
        this.age = age;
    }

    //封装方法，原型链prototype
    Person.prototype.f1 = function () {
        console.log(this.name);//this指的是Person对象, 结果：'超'
    };
    //封装方法，箭头函数的形式写匿名函数
    Person.prototype.f2 = ()=>{
        console.log(this); //this指向的是window对象
    };

    var p1 = new Person('超',18); // 使用new实例化类
    p1.age
    p1.f1();


    // 2 .es6里面的类怎么写
    class Person2{
        constructor(name,age){ //对象里面的单体模式，这个方法类似于python的__init__()构造方法，写参数的时候也可以写关键字参数 constructor(name='超2',age=18)
            //封装属性
            this.name = name;
            this.age = age;
        }  //注意这里不能写逗号
        
        showname(){  //封装方法
            console.log(this.name);
        }  //不能写逗号
    }

    let p2 = new Person2('超2',18); // 实例化对象
    p2.showname()  //调用方法  '超2'
    //es6的类也是可以继承的--用的extends和super

</script>

2. vue.js的快速入门使用

1.1 vue.js库的下载

vue.js是目前前端web开发最流行的工具库，由尤雨溪在2014年2月发布的。

另外几个常见的工具库：react.js /angular.js

官方网站：

​ 中文：https://cn.vuejs.org/

根据提示:下载开发版本vue.js

1.2 vue.js库的基本使用

vue的引入类似于jQuery，开发中可以使用开发版本vue.js，产品上线要换成生产版本vue.min.js。

1.vue中的变量可以直接进行一些简单直接的js操作

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

<div id="app">
    <h1>{{num+3}}</h1> <!--支持四则运算-->
    <h1>{{num>10?'真的':'假的'}}</h1> <!--支持三元运算-->
    <h1>{{msg.split('').reverse().join('')}}</h1> <!--文字反转,可以使用js方法和属性-->
    <h1>{{person.name}}</h1> <!--通过据点号取字典里的值-->
</div>

</body>
<script src="vue.js"></script> <!--引入vue-->
<script>
    let vm = new Vue({
        el:'#app',  // 圈地,划分vue控制范围,标签内部可以使用vue语法,外部用不了
        //数据属性写法 方式1 (了解)
        // data:{
        //     msg:'hello world!',
        // },

        //数据属性写法 方式2 单体函数模式 -- 常用
        data(){
            return {
                msg:'hello world!',
                num:11,
                person:{name:'呵呵',age:11},
            }
        },
    })
</script>
</html>

2.总结：

1. vue的使用要从创建Vue对象开始
   var vm = new Vue();
   
2. 创建vue对象的时候，需要传递参数，是自定义对象，自定义对象对象必须至少有两个属性成员
   var vm = new Vue({
     el:"#app",
	 data: {
         数据变量:"变量值",
         数据变量:"变量值",
         数据变量:"变量值",
     },
   });
   
   el:圈地，划地盘，设置vue可以操作的html内容范围，值就是css的id选择器,其他选择器也可以，但是多用id选择器。
   data: 保存vue.js中要显示到html页面的数据。
   
3. vue.js要控制器的内容外围，必须先通过id来设置。
  <div id="app">
      <h1>{{message}}</h1>
      <p>{{message}}</p>
  </div>

1.3 vue.js的M-V-VM思想

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。

Model 		指代的就是vue对象的data属性里面的数据。

View  		指代的就是vue中数据要显示的HTML标签中，在vue中，也称之为“视图模板” 。

ViewModel   数据驱动视图

在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据

console.log(vm.$el)     # #box  vm对象可以控制的范围
console.log(vm.$data);  # vm对象要显示到页面中的数据
console.log(vm.message);# 这个message就是data里面声明的数据,也可以使用 vm.变量名显示其他数据

2. Vue指令系统的常用指令

指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。在标签中使用

在vue中，提供了很多指令，常用的有：v-html、v-if、v-model、v-for等等。

2.1 文本指令v-html和v-text

	v-text -- 相当于js代码的innerText，直接在html中插值了，插的就是文本内容

​	v-html -- 相当于innerHtml,可以识别标签

​	数据发生变化时，会同时改变元素中的其控制的内容或属性

<body>

<div id="app">
    <h1>{{msg}}</h1>
    <h1 v-text="msg"></h1> <!--v-text只能识别文本-->
    <h1 v-html="atag"></h1><!--v-html可以识别标签-->
</div>

</body>
<script src="vue.js"></script>
<script>
    let vm =new Vue({
        el:'#app',
        data(){
            return{
                msg:'hello',
                atag:'<a href="">百度</a>'
            }
        },
    })

</script>

2.2 条件渲染指令v-if和v-show

v-if : 只有条件为真,才能生成标签
	是动态的增加和删除标签,整个文档节点都会重新加载一遍,当我们频繁进行标签的显示和隐藏时,可以使用v-show

v-show: 不管显示隐藏,初始加载时都会生成标签
	真-显示和假-隐藏标签,使用的是css样式display:none来隐藏的

<body>

<div id="app">
    <h1 v-if="num>10">num大于10</h1> 
    <h1 v-else-if="num<10">num小于10</h1>
    <h1 v-else>num等于10</h1>
    <h1 v-show="num>10" style="color: red">呵呵呵</h1>
</div>

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

2.3 操作-绑定标签属性v-bind

格式：

<标签名 :标签属性="data属性"></标签名>

<body>

<div id="app">
    <a v-bind:href="addr">百度1</a> <!--绑定标签属性,使用data数据属性-->
    <a :href="addr">百度2</a> <!--简写-->
</div>

</body>
<script src="vue.js"></script>
<script>
    let vm =new Vue({
        el:'#app',
        data(){
            return{
                addr:'http://www.baidu.com'
            }
        },
    })
</script>

2.4 事件绑定v-on和methods属性

有两种事件操作的写法，@事件名 和 v-on:事件名 --绑定的全部都是js的事件名

例1:完成商城的商品增加减少数量

<body>

<div id="app">
<button v-on:click="num++">+1</button>
<!--<button @click="num++">+1</button>-->
    <p>{{num}}</p>
<button @click="janfa">-1</button>
</div>

</body>
<script src="vue.js"></script>
<script>
    let vm =new Vue({
        el:'#app',
        data(){
            return{
                num:10,
            }
        },
        methods:{
            janfa(){ 
                if (this.num<=0){ //this指向vue对象
                    this.num=0
                }
                else {
                    this.num--;
                }
            },
        },
    })
</script>

例2:wifi密码切换显示

<body>
<div id="app">

    <input :type="type">
    <button @click="change">{{btn_text}}</button>

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

2.5 操作样式

2.5.1 控制标签class类名

格式：
   <h1 :class="值">元素</h1>  值可以是对象、对象名、数组（数组的方式用的比较少）

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

    <div :class="xx"></div>  
    <div :class="c1:status"></div>  <!--真,加c1样式-->
    <div :class="c1:num>10"></div>  <!--真,加c1样式-->
    <div :class="status?'c1':'c2'"></div>  <!--三元运算真,加c1样式-->

</div>
</body>
<script src="vue.js"></script>
<script>
    let vm =new Vue({
        el:'#app',
        data(){
            return{
                status:true,
                num:11,
                xx:'c1'
            }
        },
    })
</script>
</html>

2.5.2 控制标签style样式

格式1：值是json对象，对象写在元素的:style属性中
	 标签元素：
		     <div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
				<!-- 注意：不能出现中横杠，有的话就套上引号'font-size'，或者去掉横杠，后一个单词的首字母大写，比如fontSize -->
	 data数据如下：
         data: {
             activeColor: 'red',
             fontSize: '30px'
         }
格式2：值是对象变量名，对象在data中进行声明
   标签元素：
   			<div v-bind:style="styleObject"></div>
   data数据如下：
         data: {
			return{
            	styleObject: {
             		color: 'red',
             		fontSize: '13px'  
			  			}
				  }
			}

2.5.3 实例-vue版本选项卡

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

</body>
</html>

2.6 列表渲染指令v-for

在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者字典。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(value,index) in list" :key="value">{{value}}--{{index}}</li>
        <!--通过:key指定生成的标签,刷新网页不会再重复创建了,提高了页面渲染效率-->
        <!--重点:不通过:key绑定标签,频繁的调整标签顺序会导致数据混乱-->
    </ul>
    <ul>
        <li v-for="(value,index) in dict" :key="value">{{value}}--{{index}}</li>
    </ul>

</div>
</body>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return{
                list:['11','22','33','44'],
                dict:{
                    'name':'贾英贺',
                    'age':18,
                    'sex':'男'
                },
            }
        },
    })

</script>
</html>

练习：

goods:[
	{"name":"python入门","price":150},
	{"name":"python进阶","price":100},
	{"name":"python高级","price":75},
	{"name":"python研究","price":60},
	{"name":"python放弃","price":110},
]

# 把上面的数据采用table表格输出到页面，价格大于60的那一条数据需要添加背景色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="app">
    <table>
        <thead>
            <th>名字</th>
            <th>价格</th>
        </thead>
        <tbody>
            <tr v-for="(goods_value,goods_index) in goods" :key="goods_index" :class="{c1:goods_value.price>60}">
                <td>{{goods_value.name}}</td>
                <td>{{goods_value.price}}</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return{
                goods:[
                    {"name":"python入门","price":150},
                    {"name":"python进阶","price":100},
                    {"name":"python高级","price":75},
                    {"name":"python研究","price":60},
                    {"name":"python放弃","price":110},
                    ]
            }
        },
    })

</script>
</html>

2.7 双向数据绑定v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{num}}</h1>
    <input type="text" v-model="num"> <!--数据发生变化,h1标签也发生变化-->
</div>
</body>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
                num:10,
            }
        },
    })
</script>
</html>

3. Vue对象提供的属性功能

3.1 过滤器

过滤器，就是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中。

定义过滤器的方式有两种,全局过滤器和局部过滤器

3.1.1 使用Vue.filter()进行全局定义

Vue.filter("RMB1", function(v){
  	//就是来格式化(处理)v这个数据的
  	if(v==0){
    		return v
  	}
  	return v+"元"
})

3.1.2 在vue对象中通过filters属性来定义

var vm = new Vue({
  el:"#app",
  data:{},
  filters:{
    RMB2:function(value){
      if(value==''){
        return;
      }else{
      	return '¥ '+value;
      }
    }
	}
});

示例：

<body>
<div id="app">
    <h1>{{num|rmb}}</h1>                    <!--全局过滤器使用-->
    <h1>{{num|yuan('xx','oo')|fang}}</h1>    <!--传递参数,多层过滤器使用-->
</div>
</body>
<script src="vue.js"></script>
<script>
    // 全局过滤器,所有的vue对象都可以使用
    Vue.filter('rmb',function (res){
        return res + '你好'
    })

    let vm = new Vue({
        el:'#app',
        data(){
            return {
                num:100
            }
        },
        // 局部过滤器
        filters:{
            yuan(res,m,n){ //定义过滤器
                return res + '元' + m + n
            },
            fang(res){
                return res + '方'
            }
        }
    })

</script>

3.2 计算和侦听属性

3.2.1 计算属性computed

我们之前学习过字符串反转，如果直接把反转的代码写在元素中，则会使得其他同事在开发时时不易发现数据被调整了，所以vue提供了一个计算属性(computed)，可以让我们把调整data数据的代码存在在该属性中。其实计算属性主要用于监听，可以监听多个对象，后面学了监听之后再说。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{xx}}</h1>
</div>
</body>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return{
                num1:10,
                num2:20,
            }
        },
        computed:{
          xx:function () {
              let sum = this.num1 + this.num2
              return sum.toFixed(2) //保留两位小数
          }
        },
    })
</script>
</html>

3.2.2 监听属性watch

watch侦听属性，可以帮助我们侦听data某个数据的变化，从而做相应的自定义操作。

侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化后的数据值，第二个是变化前的数据值。

示例:用户名长度限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <form action="" method="post">
        账号:<input type="text" v-model="username"><span :style="user_style">{{user_text}}</span>
    </form>
</div>
</body>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return{
                username:'',
                user_style: {
                    color:''
                },
                user_text:'',
            }
        },
        watch:{
             'username'(res){
                 if(res.length>=4 && res.length<=10){
                     this.user_style.color = 'blue'
                     this.user_text = '用户名长度合法！'
                 }else {
                     this.user_style.color = 'red'
                     this.user_text = '用户名长度只能是4-10位！'
                 }
             }
        },

    })
</script>
</html>

3.3 vue对象的生命周期钩子函数

每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，在对象创建的不同阶段加上我们需要的代码，实现特定的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{num}}</h1>
</div>
</body>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
                num:10,
            }
        },
        // 1.在还没有加载vue时,自动触发函数 --可用页面加载动画
        beforeCreate:function () {
            console.log(this.$el)   //undefined
            console.log(this.$data) //undefined
        },
        // 2.在vue对象加载上数据属性之后,自动触发函数
        // 发送网络请求(ajax),向后台请求数据,然后赋值给某个属性进行处理
        created:function () {
            console.log(this.$el)   //undefined
            console.log(this.$data) // num:10
        },
        // 3.在vue加载视图之后,自动触发
        beforeMount:function () {
            console.log(this.$el)   //<h1>{{num}}</h1>
            console.log(this.$data) // num:10
        },
        // 4.在数据驱动视图之后,自动触发
        mounted:function (){
            console.log(this.$el)   //<h1>10</h1>
            console.log(this.$data) // num:10
        },
        // 主要是2,4 -- 其他了解
    })
</script>
</html>

3.4 阻止事件冒泡和刷新页面

使用.stop和.prevent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 200px;
             200px;
        }
        .c2{
            background-color: blue;
            height: 100px;
             100px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="c1" @click="f1">
<!--        <div class="c2" @click.stop="f2"></div>  阻止事件冒泡,否则点击跳出2次警告页面-->
        <div class="c2" @click.stop.prevent="f2"></div>
    </div>
    <a href="http://www.baidu.com" @click.stop.prevent="">百度</a>
    <!--阻止标签自带属性,点击不跳转网页了-->
</div>
</body>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
            }
        },
        methods:{
            f1(){
                alert(11)
            },
            f2(){
                alert(22)
            }
        }
    })
</script>
</html>