Vuejs2.0学习笔记

原创
2019/03/01 11:15
阅读数 59

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同一级,例如

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部