zoukankan      html  css  js  c++  java
  • Vue(day1)

    一、起步

    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <!-- 生产环境版本,优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    

    开始从下面的几个Vue的使用场景中熟悉Vue:

    • 声明式渲染
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Vue</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    	<div id="app">
    		{{ message }}
    	</div>
    </body>
    <script type="text/javascript">
    	var app = new Vue({
    		el: '#app',
    		data: {
    			message: 'Hello Vue!'
    		}
    	});
    </script>
    </html>
    

    看起来就像是简单的模板渲染,但其实Vue已经做了大量工作,这个时候的数据和DOM已经是“响应式”

    的了。可以打开浏览器控制台修改app实例,如app.message = 'Hello World!',然后你可以发现html页面也会随之变化。

    • 条件与循环

      使用Vue的指令v-if来决定是否创建该元素。

      <div id="app">
      	<p v-if="seen">现在你能看到我</p>
      </div>
      
      var app = new Vue({
      	el: '#app',
      	data: {
      		seen: true
      	}
      });
      

      使用v-for指令来实现循环:

      <div id="app">
      	<ul>
      		<li v-for="list in lists">
      			{{ list.text }}
      		</li>
      	</ul>
      </div>
      
      var app = new Vue({
      	el: '#app',
      	data: {
      		lists:[
      			{text: '学习js'},
      			{text: '学习vue'},
      			{text: '学习...'}
      		]
      	}
      });
      
    • 处理用户输入

      使用v-on指令为元素绑定指定事件:

      <div id="app">
      	<p> {{message}} </p>
      	<button v-on:click="reverseMessage">翻转字符串</button>
      </div>
      
      var app = new Vue({
      	el: '#app',
      	data: {
      		message: '双向绑定'
      	},
      	methods: {
      		reverseMessage: function(){
      			this.message = this.message.split('').reverse().join('');
      		}
      	}
      });
      

      使用v-model表单输入和应用状态之间的双向绑定:

      <div id="app">
      	<p> {{message}} </p>
      	<input type="text" v-model="message">
      </div>
      
      var app = new Vue({
      	el: '#app',
      	data: {
      		message: '双向绑定'
      	}
      });
      
    • 组件化应用的构建

      具体请参考:组件化应用的构建

    二、指令大全

    Vue.js提供了一些指令来方便我们操作页面,而不用我们再去操作Dom,具体详情可移步官网:指令

    v-text

    更新元素的textContent。如果要更新部分textContent,需要使用 {{ Mustache }} 插值。

    v-html

    更新元素的innerHtml。注意内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译

    v-show

    根据表达式的真假切换元素的display:none

    v-if

    根据表达式的真假决定是否创建(渲染)元素。

    注意:当和 v-for 一起使用时,v-for 的优先级比 v-if 更高。

    v-else & v-else-if

    结合v-if使用。

    v-for

    使用特定语法alias in expression,多次渲染元素或模块。

    可使用的表达式:Array | Object | number | string

    v-model
    • 限制
      • 表单控件:input | texteara | selecte
      • 组件
    • 修饰符
      • .lazy:取代input监听change事件。
      • .number:将输入的字符串转化为数字。
      • .trim:将输入的字符串过滤掉首位空格。
    • 作用
      在表单控件或组件上创建双向绑定。
    v-cloak

    无表达式,v-cloak指令保持到元素结束编译,与css规则如:[cloak]:{display: none;}一起使用,使元素在编译完成前保持“影藏”状态。这样做的目的是,元素编译结束后再显示出来,可以解决页面编译渲染时出现的闪烁情况。

    v-pre

    无表达式,使用v-pre可跳过元素及其子元素的编译过程,加快渲染速度。

    v-once

    无表达式,使用v-once指令后元素只会编译渲染一次。这样可以在某些场景下提升性能。

    v-bind
    • 作用

      为元素动态地绑定一个或多个特性(attributes + properties);或绑定一个组件的prop到表达式中。

    • 缩写::

    • 修饰符

      • .prop:被用来绑定DOM的property。(与attribute是有区别的
      • .camel:(2.1.0+) 将 kebab-case 特性名转换为 camelCase。
      • .sync: (2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器。
    • 特殊

      在绑定classstyle属性时支持数组或对象等特殊类型。

    v-on
    • 作用

      为元素绑定事件监听。

    • 缩写:@

    • 期望

      Function | Inline Statement | Object

    • 修饰符

      • .stop - 调用 event.stopPropagation()
      • .prevent - 调用 event.preventDefault()
      • .capture - 添加事件侦听器时使用 capture 模式。
      • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
      • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
      • .native - 监听组件根元素的原生事件。
      • .once - 只触发一次回调。
      • .left - (2.2.0) 只当点击鼠标左键时触发。
      • .right - (2.2.0) 只当点击鼠标右键时触发。
      • .middle - (2.2.0) 只当点击鼠标中键时触发。
      • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

    三、练习

    我们可以通过一些实际的例子来熟悉一下Vue指令的相关用法。

    文字跑马灯
    • 需求:让文字滚动起来。

    • 分析:要让文字达到滚动效果,就是随时间变化将字符串的末尾字符移动到头部,或是反过来。总结起来就是每隔一段时间操作一次字符串。另外需要一个按钮来控制文字的滚动效果。

    • 实现:

      <div id="app">
      	<p>{{ message }} </p>
      	<button @click="changeMessage"> {{ btn }} </button>
      </div>
      
      var app = new Vue({
      	el: '#app',
      	data: {
      		message: '0123456789',
      		btn: '开始',
      		status: true,
      		intervalId: undefined
      	},
      	methods: {
      		changeMessage: function(){
      			var THIS = this;
      			THIS.status = !THIS.status;
      			if(!THIS.intervalId){
      				THIS.intervalId = window.setInterval(function(){
      					THIS.message = THIS.message.toString();//防止纯数字报错
      					var len = THIS.message.length;
      					THIS.message =  THIS.message.charAt(len-1) + THIS.message.slice(0, len - 1);
      				}, 1000);
      			}
      
      			if(THIS.status){
      				THIS.intervalId = clearInterval(THIS.intervalId);
      				THIS.btn = '开始';
      			}else{
      				THIS.btn = '暂停';
      			}
      		}
      	}
      })
      
    • 利用表单双向绑定实现简单的计算器

      <div id="app">
      	<input type="text" v-model="x" @input="calculate">
      	<select v-model="smybol" @change="calculate">
      		<option value="+" selected="true">+</option>
      		<option value="-">-</option>
      		<option value="*">*</option>
      		<option value="/">/</option>
      	</select>
      	<input type="text" v-model="y" @input="calculate">
      	<input type="button" value="=" @click="calculate">
      	<input type="text" v-model="value">
      </div>
      
      var app = new Vue({
      	el: '#app',
      	data: {
      		x: 0,
      		y: 0,
      		value: 0,
      		smybol: "+"
      	},
      	methods: {
      		calculate: function(){
      			var THIS = this;
      			var x = window.parseFloat(THIS.x);
      			var y = window.parseFloat(THIS.y);
      			var S = x + THIS.smybol + y;
      			THIS.value = window.parseFloat(eval(S));
      		}
      	}
      })
      
    • 使用v-bind动态修改元素classstyle

      • class

        <!DOCTYPE html>
        <html>
        <head>
        	<title>Vue1</title>
        	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        	<style type="text/css">
                .red{
                    color: #abc;
                }
                .italic{
                    font-style: italic;
                }
                .larg{
                    font-size: 30px;
                }
            </style>
        </head>
        <body>
        	<div id="app">
        		<p>规则,就是用来打破的</p>
        		<!--原生class写法-->
        		<p class="red italic larg">规则,就是用来打破的</p>
        		<!--v-bind场景一:使用数组-->
        		<p :class="['red','italic','larg']">规则,就是用来打破的</p>
        		<!--场景二:使用三元表达式-->
        		<p :class="['red','italic',flag?'larg':'']">规则,就是用来打破的</p>
        		<!--场景三:使用数组对象-->
        		<p :class="['red','italic',{larg:flag}]">规则,就是用来打破的</p>
        		<!--场景四:直接使用对象-->
        		<p :class="{red:false, italic:true, larg:true}">规则,就是用来打破的</p>
        		<!--动态绑定-->
        		<p :class="app_class">规则,就是用来打破的</p>
        	</div>
        </body>
        <script type="text/javascript">
        	var app = new Vue({
        		el: "#app",
        		data: {
        			flag: false,
        			app_class: {red:true, italic:true, larg:true}
        		}
        	});
        </script>
        </html>
        
      • style

        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>Test</title>
            <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        </head>
        <body>
            <div id="app">
                <!--原生写法-->
                <h1 style="color: #abc;font-size: 30px;font-style: italic;">Jinx的含义就是Jinx.</h1>
                <!--使用对象-->
                <h1 :style="{color:'#217352','font-style':'30px','font-style':'italic'}">Jinx的含义就是Jinx.</h1>
                <!--使用数组-->
                <h1 :style="[{color:'#FF9800','font-style':'30px'},{'font-style':'italic'}]">Jinx的含义就是Jinx.</h1>
                <!--动态绑定-->
                <h1 :style="[sty1, sty2]">Jinx的含义就是Jinx.</h1>
            </div>
        
            <script type="text/javascript">
                var vm = new Vue({
                    el: "#app",
                    data: {
                        flag: false,
                        sty1: {color:'#aa9800','font-style':'30px'},
                        sty2: {'font-style':'italic'}
        
                    }
                });
            </script>
        </body>
        </html>
        
  • 相关阅读:
    Android的数据存储
    Servlet第一天
    JavaScript高级程序设计读书笔记(3)
    Interesting Papers on Face Recognition
    Researchers Study Ear Biometrics
    IIS 发生意外错误 0x8ffe2740
    Father of fractal geometry, Benoit Mandelbrot has passed away
    Computer vision scientist David Mumford wins National Medal of Science
    Pattern Recognition Review Papers
    盒模型bug的解决方法
  • 原文地址:https://www.cnblogs.com/fzz9/p/10256913.html
Copyright © 2011-2022 走看看