zoukankan      html  css  js  c++  java
  • Vue框架学习(一)

    一、Vue简介

    1.定义

    Vue是一个基于JavaScript的渐进式框架。渐进式:可以控制一个页面的一个标签、一系列标签、也可以控制整个页面,甚至控制整个前台项目

    2.vue的优势

    有指令(分支结构,循环结构),复用页面结构

    有实例成员(过滤器、监听),可以对渲染的数据做二次格式化

    有组件(模块的复用和组合),可以快速搭建页面

    3.三大前端框架
    • Angular (庞大)
    • React (常用于移动端)
    • Vue (吸取两者优势、轻量级)文档是中文

    二、Vue环境搭建

    """
    1)cdn
    <script src="https://cn.vuejs.org/js/vue.js"></script>
    
    2)本地导入
    <script src="js/vue.js"></script>
    """
    

    三、挂载点

    Vue对象中,el表示挂载点

    1.一个挂载点只能控制一个页面结构
    2.挂载点挂在的页面标签严格建议使用id属性进行匹配
    3.html标签与body标签不能作为挂载点
    4.可以选择用变量去接受实例化的vue对象
    

    四、插值表达式

    1.空插值表达式 {{ }},需要有空格
    2.{{ }}中渲染的变量需要在data中初始化
    3.插值表达式可以进行简单运算
    4.插值表达式与其他模版语法冲突时,可以用delimiters自定义
    

    可以将delimiters插值表达式改为标识符为[{ }]。

    <script src='js/vue.js'></script>
    <script>
        let app = new Vue({
            el : '#app',
            data : {
                nums:[1,2,3,4]
            },
            delimiters:['[{','}]']
        })
    </script>
    

    插值表达式里可以调用属性、方法

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id='app'>
    			<p>{{ nums[3] }}</p>
    			<p>{{ }}</p>
    			<p>{{ a + b }}</p>
    			<p>{{ a + b * 2}}</p>
    			<p>{{ msg.length + a }}</p>
    			<p>{{ msg.split('') }}</p>
    		</div>
    	</body>
    	<script src='js/vue.js'></script>
    	<script>
    		let app = new Vue({
    			el : '#app',
    			data : {
    				a : 1,
    				b : 2,
    				msg : 'hello world',
    				nums:[1,2,3,4]
    			},
    			// delimiters:['[{','}]']
    		})
    	</script>
    </html>
    
    

    五、过滤器

    1.用实例成员filters来定义过滤器
    2.在页面结构中,用|来标识并调用过滤器
    3.过滤方法的返回值就是过滤器过滤后的结果
    4.过滤器可以对1~n个变量进行过滤,同时还可以传入辅助的变量。过滤器方法接收参数时按照传入的位置从左到右。
    
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="app">
    			<p>{{ a,10|add|mutilply(10,20)}}</p>
    		</div>
    	</body>
    	<script src='js/vue.js'></script>
    	<script>
    		let app = new Vue({
    			el : "#app",
    			data : {
    				a : 1
    			},
    			filters:{
    				add : function(a,b){
    					return a + b
    				},
    				mutilply : function(a,b){
    					return a * b
    				}
    			}
    		})
    	</script>
    </html>
    
    # 过滤器可以串联使用,从左到右执行。上一个过滤器的结果会当做下一个过滤器的参数传入。如果参数不够,则参数为undefined。如果参数太多,则多余的参数不会被接收。
    <p>{{ n1, n2 | fn(99, 77), n1, n2 | fn(100) }}</p>
    

    六、文本指令

    1.v-*是vue指令,会被vue解析,v-text="num"中的num表示一个变量,如果在data中未定义num,则会报错。v-text="'num'",则表示字符串。
    2.v-text是原样输出渲染内容。
    3.v-html可以解析渲染html语法的内容
    
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="app">
    			<p v-text="msg"></p>
    			<p v-text="'msg'"></p>
    			<p v-text="true"></p>
    			<p v-text="false"></p>
    			<p v-text="111"></p>
    			<p v-html="msg_html"></p>
    		</div>
    	</body>
    	<script src='js/vue.js'></script>
    	<script>
    		let app = new Vue({
    			el:"#app",
    			data:{
    				msg : 'hello world',
    				msg_html: "<h1>hello world</h1>"
    			}
    		})
    	</script>
    </html>
    
    

    七、js对象内容补充

    1.js没有字典类型,只有自定义对象,可以完全替代字典来使用。
    2.js中对象的属性名,都采用自字符串类型,所以就可以省略字符串的引号
    3.对象中属性值为函数时,称之为方法,方法可以简写为: 方法名(){}
    4.如果对象的属性值是一个变量,且变量名与属性名相同,则可以简写{属性,}
    
    
    let obj = {
        'name' : "Bob",
        'eat' : function(){
        console.log("I'm eating...")
        }
    }
    console.log(obj.name,obj['name'])
    obj.eat()
    
    

    简写

    let obj1 = {
        name:'Bob',
        eat(){
            console.log("I'm eating")
        }
    }
    console.log(obj1.name,obj1['name'])
    obj1.eat()
    
    

    属性简写

    let height = 180
    let obj2 = {
        height,
        name:'Bob',
    }
    console.log(obj2.height,obj2.name)
    
    
    JS中类的声明

    prototype为类属性赋值

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		
    	</body>
    	<script>
    		let obj = {
    			'name' : "Bob",
    			'eat' : function(){
    				console.log("I'm eating...")
    			}
    		}
    		console.log(obj.name,obj['name'])
    		obj.eat()
            
    		// 方法简写 
    		let obj1 = {
    			name:'Bob',
    			eat(){
    				console.log("I'm eating")
    			}
    		}
    		console.log(obj1.name,obj1['name'])
    		obj1.eat()
    		// 属性简写
    		let height = 180
    		let obj2 = {
    			height,
    			name:'Bob',
    		}
    		console.log(obj2.height,obj2.name)
    		
    		
    		// js中声明一个类
    		class People{
    			constructor(name) {
    			    this.name = name
    			}
    			eat(){
    				console.log(this.name + " is eating...")
    			}
    		}
    		let obj3 = new People('Kimmy')
    		let obj4 = new People('David')
    		console.log(obj3.name,obj3.school)
    		console.log(obj4.name,obj4.school)
    		obj3.eat()
    		obj4.eat()
    		People.prototype.school = 'OldBoy'
    		console.log(obj3.name,obj3.school)
    		console.log(obj4.name,obj4.school)
    		
    		// 第二种声明方式
    		function Student(name){
    			this.age =18
    			this.name = name
    			this.fly = function(){
    				console.log(this.name + ' is flying')
    			}
    		}
    		let obj5 = new Student('Amy')
    		let obj6 = new Student('Daming')
    		console.log(obj5.name,obj5.age)
    		console.log(obj6.name,obj6.age)
    		obj5.fly()
    		obj6.fly()
    		
    	</script>
    </html>
    
    

    八、js函数内容补充

    函数的形参和调用时传入的实参关系:传入和接收的参数个数不需要一致,按位置进行赋值,不存在关键字参数,多余的实参不会被接收,没有被赋值的形参会被赋值为undefined。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		
    	</body>
    	<script src="js/vue.js"></script>
    	<script type="text/javascript">
    		// 函数定义1
    		function fn1(a,b){
    			console.log(a+b)
    			return a + b 
    		}
    		fn1(1,10)
    		
    		// 函数定义2
    		let fn2 = function(a,b){
    			console.log(a+b)
    			return a + b 
    		}
    		fn2(1,10)
    		
    		// 箭头函数
    		let fn3 = (a,b)=>{
    			console.log(a+b)
    			return a + b
    		}
    		fn3(1,10)
    		
    		
    		// 箭头函数只有一条语句时可以省去{}
    		let fn4 = (a,b)=>console.log(a*b +10)
    		fn4(1,10)
    		
    		// 当形参只有一个时,可省略()
    		let fn5 = a => console.log(a*a)
    		fn5(10)
    		
    		console.log(5)
    		console.log(10+ '5')
    		console.log('55555')
    		// 快速类型转换 字符串 ---> 数字类型
    		console.log(+'55555')
    	</script>
    </html>
    
    

    九、事件指令

    * 一、数据驱动
    *  1)操作是一个功能,使用需要一个方法来控制 2)方法名是变量,所以控制变量就可以控制该方法
    *
    *
    * 二、事件指令
    *  1)在实例成员methods中声明事件方法
    *  2)标签通过事件指令绑定声明的方法: v-on:事件名="事件方法名"   eg: <button v-on:click="btnClick">按钮</button>
    
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="app">
    			<!-- 直接绑定事件名默认传入事件对象 -->
    			<button v-on:click="my_click">{{ btn }}</button>
    			
    			<!-- 加括号手动传入参数,$event可传入事件对象-->
    			
    			<p>{{ num }}</p>
    			<p v-text="msg"></p>
    			<button v-on:click="increase(btn1,$event)">{{ btn1 }}</button>
    			<button v-on:click="decrease(btn2,$event)">{{ btn2 }}</button>
    			<hr>
    
    		</div>
    		
    	</body>
    	<script src="js/vue.js"></script>
    	<script>
    		let app = new Vue({
    			el:'#app',
    			data:{
    				num: 0,
    				btn:'点我',
    				btn1:'增加',
    				btn2:'减少',
    				msg:'',
    			},
    			methods:{
    				my_click(ev){
    					console.log(ev)
    				},
    				increase(btn,ev){
    					this.num++
    					this.msg = '你点击了' + btn
    					console.log(ev.clientX,ev.clientY)
    				},
    				decrease(btn){
    					this.num--
    					this.msg = '你点击了' + btn
    				}
    			}
    		})
    	</script>
    </html>
    
    
  • 相关阅读:
    Best Time to Buy and Sell Stock III
    Valid Palindrome
    Longest Substring Without Repeating Characters
    Copy List with Random Pointer
    Add Two Numbers
    Recover Binary Search Tree
    Anagrams
    ZigZag Conversion
    Merge k Sorted Lists
    Distinct Subsequences
  • 原文地址:https://www.cnblogs.com/Ghostant/p/12316852.html
Copyright © 2011-2022 走看看