Vue.js入门

最新推荐文章于 2021-03-24 14:48:13 发布
最新推荐文章于 2021-03-24 14:48:13 发布
阅读量620 收藏
点赞数
分类专栏： 前端知识积累篇
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ccnuacmhdu/article/details/105907127
版权

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

介绍

开发环境

下载开发工具 HBuilderX，点击学习视频下载课程源码，如下图。
在这里插入图片描述
在这里插入图片描述

第一个 Vue 应用

在这里插入图片描述

Vue 实例

数据与方法

在这里插入图片描述

生命周期

在这里插入图片描述
图中像 beforeCreate 等函数称为生命周期钩子的函数！下面演示了下钩子。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	{{msg}}
</div>
<script type="text/javascript">
// Vue.js 官网 -- API -- 选项/生命周期钩子
var vm = new Vue({
	el : "#app",
	data : {
		msg : "hi vue",
	},
	//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
	beforeCreate:function(){
		console.log('beforeCreate');
	},
	/* 在实例创建完成后被立即调用。
	在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
	然而，挂载阶段还没开始，$el 属性目前不可见。 */
	created	:function(){
		console.log('created');
	},
	//在挂载开始之前被调用：相关的渲染函数首次被调用
	beforeMount : function(){
		console.log('beforeMount');
	},
	//el 被新创建的 vm.$el 替换, 挂在成功	
	mounted : function(){
		console.log('mounted');
	
	},
	//数据更新时调用
	beforeUpdate : function(){
		console.log('beforeUpdate');
			
	},
	//组件 DOM 已经更新, 组件更新完毕 
	updated : function(){
		console.log('updated');
			
	}
});
setTimeout(function(){
	vm.msg = "change ......";
}, 3000);
</script>
</body>
</html>

模板语法

插值 {{}}

在这里插入图片描述

指令

在这里插入图片描述

计算属性

在这里插入图片描述
在这里插入图片描述

监听属性

<script src="https://how2j.cn/study/vue.min.js"></script>
    
<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
}
tr.firstLine{
    background-color: lightGray;
}
</style>
  
<div id="div1">
    
    <table align="center" >
        <tr class="firstLine">
            <td>人民币</td>
            <td>美元</td>
        </tr>       
        <tr>
        	<td align="center" colspan="2">
        	汇率： <input type="number" v-model.number="exchange" />
        	</td>
        </tr>
        
        <tr>
        
        	<td align="center">
        		￥: <input type="number" v-model.number = "rmb"  />
        	</td>
        	<td align="center">
        		$: <input type="number" v-model.number = "dollar"   />
        	</td>
        </tr>
    </table>
  
</div>
     
<script>
   
new Vue({
      el: '#div1',
      data: {
    	  exchange:6.4,
          rmb:0,
          dollar:0
      },
      watch:{
          rmb:function(val) {
              this.rmb = val;
              this.dollar = this.rmb / this.exchange; 
          },
          dollar:function(val) {
              this.dollar = val;
              this.rmb = this.dollar * this.exchange; 
          },
      }
      
    })
     
</script>

在这里插入图片描述

class 和 style 绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<!-- 绑定 <style><style> 中书写的 CSS 类 -->
	<!-- 下面 [] 等价于 {active : isActive, green : isGreen} 是否绑定 active 取决于 isActive-->
	<div 
	class="test"
	v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '']" 
	style="width:200px; height:200px; text-align:center; line-height:200px;">
		hi vue
	</div>
	<!-- 绑定 HTML 内联属性-->
	<div 
	:style="{color:color, fontSize:size, background: isRed ? '#FF0000' : ''}">
		hi vue
	</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		isActive : true,
		isGreen : true,
		color : "#000000",
		size : '50px',
		isRed : true
	}
});
</script>
<style>
.test{font-size:30px;}
.green{color:#0000FF;}
.active{background:#FF9000;}
</style>
</body>
</html>

在这里插入图片描述

条件渲染

在这里插入图片描述

列表渲染（循环）

在这里插入图片描述

事件处理

在这里插入图片描述

表单输入双向绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<div id="example-1">
		<input v-model="message" placeholder="edit me">
		<p>Message is: {{ message }}</p>
		<textarea v-model="message2" placeholder="add multiple lines"></textarea>
		<p style="white-space: pre-line;">{{ message2 }}</p>
		<br />
		
		<div style="margin-top:20px;">
			<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
			<label for="jack">Jack</label>
			<input type="checkbox" id="john" value="John" v-model="checkedNames">
			<label for="john">John</label>
			<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
			<label for="mike">Mike</label>
			<br>
			<span>Checked names: {{ checkedNames }}</span>
		</div>
		
		<div style="margin-top:20px;">
			<input type="radio" id="one" value="One" v-model="picked">
			<label for="one">One</label>
			<br>
			<input type="radio" id="two" value="Two" v-model="picked">
			<label for="two">Two</label>
			<br>
			<span>Picked: {{ picked }}</span>
		</div>
		<button type="button" @click="submit">提交</button>
	</div>
	
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		message : "test",
		message2 :"hi",
		checkedNames : ['Jack', 'John'],
		picked : "Two"
	},
	methods: {
		submit : function () {
			// 点击提交按钮，此处就可以收集表单里的各个值，完成表单提交功能
		}
	}
});
</script>
<style type="text/css">

</style>
</body>
</html>

在这里插入图片描述

过滤器

单个过滤器

<script src="https://how2j.cn/study/vue.min.js"></script>

<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;	
}
tr.firstLine{
    background-color: lightGray;
}
</style>
  
<div id="div1">
    
    <table align="center" >
        <tr class="firstLine">
            <td>输入数据</td>
            <td>过滤后的结果</td>
        </tr>       
        <tr>
        	<td align="center">
        		<input v-model= "data"  />
        	</td>
        	<td align="center">
        		{{ data|capitalize }}
        	</td>
        </tr>
    </table>
  
</div>
     
<script>
   
new Vue({
      el: '#div1',
      data: {
    	  data:''
      },
      filters:{
    	  capitalize:function(value) {
    		    if (!value) return '' //如果为空，则返回空字符串
    		    value = value.toString()
    		    return value.charAt(0).toUpperCase() + value.substring(1)
          }
      }
    })
     
</script>

在这里插入图片描述

多个过滤器

<script src="https://how2j.cn/study/vue.min.js"></script>

<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;	
}
tr.firstLine{
    background-color: lightGray;
}
</style>
  
<div id="div1">
    
    <table align="center" >
        <tr class="firstLine">
            <td>输入数据</td>
            <td>过滤后的结果</td>
        </tr>       
        <tr>
        	<td align="center">
        		<input v-model= "data"  />
        	</td>
        	<td align="center">
        		{{ data|capitalize|capitalizeLastLetter }}
        	</td>
        </tr>
    </table>
  
</div>
     
<script>
   
new Vue({
      el: '#div1',
      data: {
    	  data:''
      },
      filters:{
    	  capitalize:function(value) {
    		    if (!value) return '' //如果为空，则返回空字符串
    		    value = value.toString()
    		    return value.charAt(0).toUpperCase() + value.substring(1)
          },
      	  capitalizeLastLetter:function(value) {
    		    if (!value) return '' //如果为空，则返回空字符串
    		    value = value.toString()
    		    return value.substring(0,value.length-1)+ value.charAt(value.length-1).toUpperCase()
          }
      }
    })
     
</script>

在这里插入图片描述

全局过滤器

<script src="https://how2j.cn/study/vue.min.js"></script>

<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;	
}
tr.firstLine{
    background-color: lightGray;
}
</style>
  
<div id="div1">
    
    <table align="center" >
        <tr class="firstLine">
            <td>输入数据</td>
            <td>过滤后的结果</td>
        </tr>       
        <tr>
        	<td align="center">
        		<input v-model= "data"  />
        	</td>
        	<td align="center">
        		{{ data|capitalize|capitalizeLastLetter }}
        	</td>
        </tr>
    </table>
  
</div>
     
<script>
Vue.filter('capitalize', function (value) {
	if (!value) return ''
	value = value.toString()
	return value.charAt(0).toUpperCase() + value.slice(1)
})
	
Vue.filter('capitalizeLastLetter', function (value) {
	if (!value) return '' //如果为空，则返回空字符串
	value = value.toString()
	return value.substring(0,value.length-1)+ value.charAt(value.length-1).toUpperCase()
})

new Vue({
      el: '#div1',
      data: {
    	  data:''
      }
    })
     
</script>

组件

局部组件

<script src="https://how2j.cn/study/vue.min.js"></script>

<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
</style>

<div id="div1">
    <product></product>
    <product></product>
    <product></product>
</div>
 
<script>
new Vue({
  el: '#div1',
  components:{
	  'product':{
		  template:'<div class="product" >MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮</div>'
	  }
  }
})
</script>

在这里插入图片描述

全局组件

<script src="https://how2j.cn/study/vue.min.js"></script>

<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
</style>

<div id="div1">
    <product></product>
    <product></product>
    <product></product>
</div>
 
<script>
Vue.component('product', {
	  template: '<div class="product" >MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮</div>'
	})

new Vue({
  el: '#div1'
})
</script>

在这里插入图片描述

参数

<script src="https://how2j.cn/study/vue.min.js"></script>

<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
</style>

<div id="div1">
    <product name="MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮"></product>
    <product name="宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包"></product>
    <product name="唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮"></product>
</div>
 
<script>
Vue.component('product', {
	  props:['name'],
	  template: '<div class="product" >{{name}}</div>'
	})

new Vue({
  el: '#div1'
})
</script>

在这里插入图片描述

动态参数

<script src="https://how2j.cn/study/vue.min.js"></script>

<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
</style>

<div id="div1">
	组件外的值：<input v-model="outName" ><br>
    <product v-bind:name="outName"></product>
</div>
 
<script>
Vue.component('product', {
	  props:['name'],
	  template: '<div class="product" >{{name}}</div>'
	})

new Vue({
  el: '#div1',
  data:{
	  outName:'产品名称'
  }
})
</script>

在这里插入图片描述

自定义事件

<script src="https://how2j.cn/study/vue.min.js"></script>

<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
</style>

<div id="div1">
    <product name="MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮" sale="10" ></product>
    <product name="宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包" sale="20" ></product>
    <product name="唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮" sale="30" ></product>
</div>

<script>
Vue.component('product', {
	  props:['name','sale'],
	  template: '<div class="product" v-on:click="increaseSale">{{name}} 销量: {{sale}} </div>',
	  methods:{
		  increaseSale:function(){
			  this.sale++
		  }
	  }
	})

new Vue({
  el: '#div1'
})
</script>

在这里插入图片描述

遍历 json 数组

<script src="https://how2j.cn/study/vue.min.js"></script>

<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
</style>

<div id="div1">
    <product v-for="item in products" v-bind:product="item"></product>
</div>

<script>
Vue.component('product', {
	  props:['product'],
	  template: '<div class="product" v-on:click="increaseSale">{{product.name}} 销量: {{product.sale}} </div>',
	  methods:{
		  increaseSale:function(){
			  this.product.sale++
		  }
	  }
	})

new Vue({
  el: '#div1',
  data:{
	  products:[
	            {"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","sale":"18"},
	            {"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","sale":"35"},
	            {"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","sale":"29"}
	            ]
  }
})
</script>

在这里插入图片描述

参考资料

[1] Vue.js 官方教程
[2] HOW2J.CN

Only you, only you!
关注
专栏目录
Vue 详解
爱睡的虫虫
12-28 259
认识vue.js vue 是什么 官方文档：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 如果你想在深入学习 Vue 之...
vue.js入门源代码
08-07
Vue.js 是一款轻量级的前端JavaScript框架，它以其易用性、灵活性和高性能而备受开发者喜爱。Vue.js 的核心设计理念是数据驱动视图，这使得开发者能够专注于处理应用程序的数据逻辑，而Vue会自动处理视图的更新。在...
VueJS API文档 Vue是一套用于构建用户界面的渐进式JavaScript框架
01-16
VueJS API文档。Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。
vue
初一
04-14 505
vue的入门什么是vue？介绍MVVM声明渲染，条件渲染，列表渲染模板指令双向绑定v-model计算属性，数据观测，方法事件绑定，修饰符组件路由动态组件，缓存组件组件通讯正向数据流，父 -> 子 通过props传递反向数据流，子 -> 父 使用 $emit父子组件数据共享 使用$refs $parent兄弟之间传值 公共总线 eventBus使用$root设置全局属性订阅发布模式（第...
Vue.js 框架学习(一)
山鬼谣弋痕夕的博客
07-21 2149
Vue.js框架学习 Vue.js（读音/vjuː/，类似于view）是一套构建用户界面的渐进式框架。 vue 是一个 “渐进式” 的 JavaScript mvvm 框架。 Vue只关注视图层，采用自底向上增量开发的设计。 Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。 第一步    下载独立版本 我们可以在Vue.js的官网上直接下载vue.min.js并...
认识Vue
ace15824843202的博客
11-20 225
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 &lt;h2&gt;什么是MVVM&lt;/h2&gt; &...
vue.js入门教程之基础语法小结
12-28
Vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb。 以下代码是Vue.js最简单的例子， 当 input 中的内容变化时，p 节点的内容会跟着变化。 <!-- ...
Vue.js入门教程.pdf
最新发布
06-18
- **定义**：Vue.js（发音类似于“view”）是一款用于构建用户界面的轻量级JavaScript框架。该框架以其简洁的API、高效的数据绑定以及可组合的视图组件而著称。 - **核心特点**： - **易用性**：Vue.js的设计目标之...
Vue.js入门爬坑项目实例1
09-01
整个文件就是官网：https://cn.vuejs.org/v2/guide/#Vue-js-是什么 入门介绍，虽然官网介绍的步骤着实详尽，但作为萌新入门还是有一些坑， 特将自己爬坑的代码贡献出来。希望对大家能有帮助。
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
vue.js 构建用户界面的渐进式框架
10-12
Vue.js 是一套构建用户界面的渐进式框架。分享在这里方便大家使用。
php vue是什么,vue.js是什么软件
weixin_29007135的博客
03-24 354
vue.js是什么软件是一套用于构建用户界面的渐进式JavaScript框架，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用，Vue的核心库只关注视图层，方便与第三方库或既有项目整合。【相关文章推荐：vue.js】Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有...
渐进式 JavaScript 框架Vue环境搭建（一）
吕小小布的博客
12-27 291
vue Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。    VUE CLI CLI (@vue/cli) 是一个全...
vue简介
一步一脚印的博客
12-30 367
认识 Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。 Vue渐进式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html Vue只关注视图层。 Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。 Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue学习起来非...
vue.js学习（一）-- 认识vue
这不是我的博客
12-28 352
一、vue.js相关网址 官网：https://cn.vuejs.org/ 中文文档：https://cn.vuejs.org/v2/guide/ GitHub：https://github.com/vuejs/vue 百度百科：https://baike.baidu.com/item/Vue.js/19884851?fr=aladdin 二、vue.js是什么？ Vue (读音 /v...
一：vue的介绍
wuwangchuxin
11-03 513
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 简介 Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容...
Vue-简介和入门
Ara_Hu的博客
04-13 378
Vue Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 对于Vue，它是一款渐进式的JavaScript框架，何谓渐进...
145 前端Vue
wang_luwei的博客
09-21 919
文章目录一、概述二、前端知识体系2.1前端三要素2.2结构层（HTML）2.3表现层（CSS）什么是CSS预处理器2.4、行为层(JavaScript)Native原生JS开发TypeScript微软的标准JavaScript框架UI框架JavaScript构建工具2.5、三端统一混合开发(Hybrid App)微信小程序2.6、后端技术2.7、主流前端框架iViewElementUIICEVantUIAtUI三、了解前后分离的演变史3.1、后端为主的MVC时代优点缺点3.2、基于AJAX带来的SPA时代优
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值