vue基础知识

Vue基础知识

目录

1. vue基础介绍
2. vue的helloword(环境)
3. 数据绑定机制(vue核心)
4. 表达式
5. 各种数据渲染
   5.1 普通渲染
   5.2 条件渲染
   5.3 循环渲染
   5.4 输入框双向绑定
6. 事件处理
7. 组件
8. 生命周期
9. 网络数据下载
10. 路由

课程内容

1.vue基础介绍

q1.神马是vue

vue是一套构建用户ui界面的js框架
简单: vue是js框架

q2.什么是库,什么是框架

(1)调用方式
  库提供函数和对象, 我们使用函数和对象
  框架提供一个代码骨架,我们把代码填充到骨架内容
    框架去执行我们的代码

(2)限制
  库几乎没什么限制, 多个库我们可以组合使用
  框架具有限制, vue限制是mvvm, angular和mvc, recat虚拟dom

(3)常见库
  swiper,jquery, bootstrap提供组件
  zepto,iScroll,AlloyFinger,fastclick

(4)常见框架
  bootstrap栅格机制
  vue
  react
  angular
  .....

q3.关于vue

vue的作者: 尤雨溪(国人,经历国际化)

中文官网: cn.vuejs.org
国际官网: vuejs.org

vue官方教程: https://cn.vuejs.org/v2/guide/
vue api手册: https://cn.vuejs.org/v2/api/

版本: 现在学习版本 2.0

q5.vue的优点和缺点

	
优点:
  (1)vue相对其他框架学习简单,使用简单
  (2)vue适合多个交互,大中型的项目
  (3)使用组件,模板提供开发效率
  (4)适合做后台

劣势
  (1)学习成本的, 学到一定程度
  (2)经历思维的转变(vue没有直接dom操作)
  (3)不适合需要进行SEO的项目
    SEO 搜索引擎优化

内容: 新闻类....

<div id="app">
			{
  {msg}}
		</div>
		

		<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			//model
			var data = {
    
				msg:"hello world"
			}
			
			//viewModel
			var app = new Vue({
    
				el:"#app",
				data:data
			})
			
		</script>

2.vue的helloword(环境)

q.如何写一个hello world

  Step1: 写一个div,设置id=app

  Step2: 引入js

  Step3: 定义data,里面是数据

  Step4: 创建一个vue实例
    核心属性1: el, 表示vue操作的元素
    核心属性2: data,表示加载的数据

<!-- Step1: 写个vue基本结构 -->
		<div id="app">
			{
  {msg}}
		</div>
		
		<!-- Step2: 引入文件 -->
		<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<!-- Step3: 初始化 -->
		<script type="text/javascript">
			
			var data = {
    
				msg:"hello world"
			}
			
			var app = new Vue({
    
				el:"#app",
				data:data
			})
			
			
		</script>

3.数据绑定机制(vue核心)

q.为什么这样去写?

(1)基于mvvm机制

  层级1: v = view 界面视图

  层级2: vm = viewmodel 视图模型绑定

  层级3: m = model 数据模型

(2)作用:
  当数据改变,界面自动改变
  当界面输入值改变,数据自动改变

(3)数据绑定机制

4.表达式

q1.什么是表达式?

  js就有表达式, 1+1

  {
 {}} 放的也是表达式

q2.vue中 { {}} 能放什么?

  数学表达式能放
  字符串能放
  系统对象函数
  methods中定义的函数
  实例data属性定义的变量

q3.vue { {}}不能放什么

  全局定义的函数
  全局定义变量

<!-- view -->
		<div id="app">
			{
  {msg}}
			
			<p>{
  {100}}</p>
			<p>{
  {100+100}}</p>
			<p>{
  {(100-50)*3}}</p>
			
			<p>{
  {'aaa'}}</p>
			<p>{
  {'aaa'+'bbbb'}}</p>
			
			<p>{
  {Math.abs(-100)}}</p>
			
			<p>{
  {sum(10,20)}}</p>
	
			
		</div>
		

		<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
	
//			var a = 20
			
// 			function func () {
    
// 				return "func"
// 			}
			
			//model
			var data = {
    
				msg:"hello world"
			}
			
			//viewModel
			var app = new Vue({
    
				el:"#app",
				data:data,
				methods:{
    
					sum(x,y){
    
						return x+y
					}
				}
			})
			
		</script>

5.各种数据渲染

普通渲染

q1.如何实现普通渲染,把变量显示出来

语法: {
 {}}
语法: 

<!-- view -->
		<div id="app">
			
			<p>{
  {content}}</p>
			
			<p v-html='content'></p>
			
		</div>
		

		<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			//model
			var data = {
    
				msg:"hello world",
				content:`<ul>
							<li>11</li>
							<li>22</li>
							<li>33</li>
						</ul>`
			}
			
			//viewModel
			var app = new Vue({
    
				el:"#app",
				data:data
			})
			
		</script>

html渲染

q2.如何把html显示到vue的view上?

使用 v-html=""

<!-- view -->
		<div id="app">
			{
  {msg}}
			
			<p>
				<span>{
  {msg}}</span>
			</p>
			<p>
				<span v-text="msg"></span>
			</p>
		</div>
		

		<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			//model
			var data = {
    
				msg:"hello world"
			}
			
			//viewModel
			var app = new Vue({
    
				el:"#app",
				data:data
			})
			
		</script>

属性渲染

q3.如何渲染属性

使用 v-bind:属性名="变量名"

百度
图片

		<!-- view -->
		<div id="app">
			
			<p>
				<!-- wechat支持, vue不支持 -->
				<!-- <a href="{
   { url }}">百度</a> -->
			</p>
			
			<p>
				<a v-bind:href="url">百度</a>
			</p>
			
			<p>
				<a :href="url">百度</a>
			</p>
			
		</div>
		

		<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			//model
			var data = {
    
				msg:"hello world",
				url:"http://www.baidu.com"
			}
			
			//viewModel
			var app = new Vue({
    
				el:"#app",
				data:data
			})
			
		</script>

样式渲染

q.如何渲染样式

普通: style=""
语法: v-bind:style="表达式"

案例1: v-bind:style=" '' "
案例2: v-bind:style=" {} "
语法3: v-bind:style=" 变量 "
简写语法: style=""

 <!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8" />
   	<meta name="viewport" content="width=device-width, initial-scale=1">
   	<title></title>
   </head>
   <body>
   	
   	<!-- view -->
   	<div id="app">
   		{
  {msg}}
   		
   		<!-- 常用 -->
   		<p style="color:blue">
   			海阔天空
   		</p>
   		
   		<!-- 一般不用 -->
   		<p v-bind:style="  'color:blue'   ">
   			海阔天空
   		</p>
   		
   		<!-- 一般不用 -->
   		<p v-bind:style="  {
      color:'red','font-size':'24px'}   ">
   			海阔天空
   		</p>
   		
   		<!-- 常用 -->
   		<p v-bind:style="  s1   ">
   			海阔天空
   		</p>
   		
   		
   	</div>
   	

   	<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
   	
   	<script type="text/javascript">
   		
   		//model
   		var data = {
    
   			msg:"hello world",
   			s1:{
    color:'red','font-size':'24px'}
   		}
   		
   		//viewModel
   		var app = new Vue({
    
   			el:"#app",
   			data:data
   		})
   		
   	</script>
   	
   </body>
</html>

class渲染

q.如何渲染class

语法:  v-bind:class="表达式"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1"