Vuejs2.0学习笔记

最新推荐文章于 2022-07-22 21:59:04 发布

weixin_34378969

最新推荐文章于 2022-07-22 21:59:04 发布

阅读量252

点赞数

文章标签： python 前端框架前端 ViewUI

原文链接：https://my.oschina.net/maliang1989/blog/3016563

版权

2019独角兽企业重金招聘Python工程师标准>>>

Vuejs2.0是一个MVVM(Model-View-ViewModel)前端框架，支持双向数据绑定。核心思想：

数据驱动
组件化前端开发

一、核心库安装：

1. 安装node(同时安装好了npm)
2. 安装cnpm
3. 安装vue-cli

二、第一个demo: hello

<html>
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        Vue.config.devtools=true;
        Vue.config.productionTip=true;
    	window.onload=function(){
    	new Vue({
        	el:'#itapp',
        	data:{
            	message:'hello vue'
        	}
    	});
    }
    </script>
</head>
  <body>
    <div id="itapp">
        {{message}}
    </div>
  </body>
<html>

三、安装Chrome下的Vue-devtools插件

四、Vue2.0中的常用指令 1. v-model指令：双向数据绑定，常用在表单

<html>
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        Vue.config.devtools=true;
        Vue.config.productionTip=true;
        window.onload=function(){
            new Vue({
                el:'#itapp',
                data:{
                    message:'hello vue'
                }
        });
        }
    </script>
</head>
<body>
    <div id="itapp">
        <input v-model="message" type="text">
        <p>Message is: {{message}}</p>
    </div>
</body>
<html>

2. v-for指令 将一个数组或者对象对应为html中的一组元素

<html>
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        Vue.config.devtools=true;
        Vue.config.productionTip=true;
        window.onload=function(){
            new Vue({
                el:'#v-for-object',
                data:{
                    message:'hello vue',
                    users:{
                        'name':'maliang',
                        'age':'30',
                        'sex':'男'
                     }
                }
         });
        }
    </script>
</head>
<body>
    <ul id='v-for-object' class='demo'>
        <li v-for="user in users">
            {{user}}
        </li>
    </ul>
</body>
<html>

参考 https://cn.vuejs.org/v2/guide/list.html#%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E7%9A%84-v-for

3. v-on指令 用来绑定事件监听器

<html>
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        Vue.config.devtools=true;
        Vue.config.productionTip=true;
        window.onload=function(){
            new Vue({
                el:'#v-for-object',
                data:{ //数据
                    message:'hello vue',
                    users:{
                        'name':'maliang',
                        'age':'30',
                        'sex':'男'
                     }
                },
               methods:{ //函数
                   send(){
                       console.log("this is a test");
                  }
              }
        });
    }
</script>
</head>
<body>
    <div id="v-for-object">
        <button v-on:click="send()">点我</button>
    </div>
</body>
<html>

4. v-show和v-if指令

<html>
	<head>
		<meta charset="UTF-8">
		<title>hello world</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			Vue.config.devtools=true;
			Vue.config.productionTip=true;
			window.onload=function(){
				new Vue({
					el:'#v-for-object',
					data:{ //数据
						message:'hello vue',
						flag:true,
						index:false,
						users:{
							'name':'maliang',
							'age':'30',
							'sex':'男'
						}
					},
					methods:{ //函数
						send(){
							console.log("this is a test");
						}
					}
				});
			}
		</script>
	</head>	
	<body>
		<div id="v-for-object">
			<h2 v-if="flag">Hello v-if</h2>
			<h2 v-if="index">false v-if</h2>

			<h1 v-show="flag">Hello v-show</h1>
			<h1 v-show="index">false v-show</h1>
		</div>
	</body>	
<html>

5. 事件与内置事件对象$event

5.1 事件简写：可以将 v-on:click="函数" 简写为 @click="函数"
5.2 事件的内置对象$event，例如获取button上的文字, 通过事件的内置对象获取信息：<button @click="print($event)">点我</button>

<script type="text/javascript">
    Vue.config.devtools=true;
    Vue.config.productionTip=true;
    window.onload=function(){
        new Vue({
            el:'#v-for-object',
            data:{
                text:'', //数据为空
            }
            methods:{ //函数
                print(e) {
                   this.text=e.target.innerHTML; 通过内置this对象，将text赋值为Button按钮上的文字；
                }
           }
      });
    }
</script>

5.3 事件冒泡 a). js阻止事件冒泡，依赖于事件对象$event, 并调用e.stopPropagation()方法阻止事件冒泡。 b). vue阻止事件冒泡，不依赖于事件对象，使用@click.stop="函数"即可，但是vue内部实际上也是调用了内置事件对象的e.stopPropagation()方法。
5.4 事件默认行为 a). js默认行为，也需要依赖于内置事件对象$event, 并调用e.preventDefault()； b). vu阻止默认行为，不依赖于事件对象，使用@click.prevent="函数"的方式；
5.5 键盘事件 a). 通过@keydown="函数"的方式传递内置事件对象，例如：<input type="text" @keydown="submit($event)"></input>, 而model层的submit函数通过判断if(e.keycode==13)判断按下的是否为“回车键”，如果是则进行提交操作； b). vue在键盘事件的处理上，通过@keydown.13="函数"的方式或者@keydown.enter="函数"，即当用户按下回车键时，才会触发函数调用操作，且不需要穿内置对象$event。例如：<input type="text" @keydown.13="submit()"></input> 备注：enter的keycode为13

6. 属性

6.1 属性绑定与属性简写 a). 使用"v-bind:属性"进行vue与DOM属性的绑定。例如：<img v-bind:src="url" /> b). 可以将"v-bind:属性"简写为":属性"。例如: <img src="url" /> c). 以上说明：用了v-bind跟属性进行绑定，才能用vue里面的变量url，否则就是原始的DOM src；
6.2 绑定特殊的class和style属性

<html>
    <head>
        <meta charset="UTF-8">
        <title>hello world</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
            Vue.config.devtools=true;
            Vue.config.productionTip=true;
            window.onload=function(){
                new Vue({
                    el:'#v-for-object',
                    data:{ //数据
                        url:'https://www.baidu.com/img/dong_09e2cf5ed88fbc0093809ab8d37faf6e.gif',
                        bb:'aa',
                        dd:'cc',
                        flag:false,
                        hello:{aa:true,cc:false}
                 }
            });
        }
    </script>
    <style type="text/css">
        .aa{
        color: red;
        font-size: 20px;}
    </style>
    <style type="text/css">
        .cc{
            background: blue;
        }
    </style>
</head>
<body>
    <div id="v-for-object">
    <!-- 使用v-bind绑定到属性，也可以缩写为:属性 -->
        <img v-bind:src="url" /> 
        <p class="aa">传统css测试</p>
        <p v-bind:class="bb">测试vue方式一</p>
        <p :class="[bb,dd]">测试vue多种样式一</p>
        <p :class="{aa:true,cc:flag}">测试vue多种样式二</p>
        <p :class="hello">测试vue多种样式三</p>
    </div>
</body>
<html>

7. 模版

7.1 vue使用基于html的模版语法，可以将DOM属性绑定到Vue的实例中的数据，模版就是{{ }}, 用来进行数据绑定，并显示在页面中。也称为Mustache语法。
7.2 数据的绑定方式 a). 双向绑定：v-model b). 单向绑定
- 方式一：使用{{ }}，可能在加载数据时，出现闪烁，即页面显示两个大括号，影响体验，可以用v-cloak解决
- 方式二：使用v-text、v-html（两者略微不同）
7.3 其它指令 a). v-pre：不编译，直接原样式输出 b). v-once: 只绑定一次，即第一次绑定后，不会再进行绑定

**8.过滤器 **

8.1 作用：用来过滤来自vue model中的数据，在页面显示之前进行数据处理和筛选，基本语法：{{data|filter1(参数)|filter2(参数)}}
8.2 vue2.0中已经删除了所有的内置过滤器；可以选择使用第三方js库：例如，loadash、date-fns日期格式化、accounting.js货币格式化德国。
8.3 使用自定义过滤器 a). 全局过滤器，全部vue实例中都可以使用，语法：Vue.filter(过滤器id, 回调函数)；例如以下事例：如果数字x小于10，将其变为0x,如果大于10则直接输出。事例一：

事例二：

b). 局部过滤器: 在实例内部定义局部过滤器，即：跟el,data,methods,filters同一级，例如