vue 学习和入门

henry2020
304 阅读2分钟

vue 学习和入门

  • 教程: https://learning.dcloud.io/#/?vid=4

  • 前置知识点

    • 什么是div(包括class): https://www.w3school.com.cn/tags/tag_div.asp
    • 什么是css: https://www.w3school.com.cn/css/css_selector_id.asp
    • div 和 class: https://zhidao.baidu.com/question/571815759.html

安装和部署

  • 有几种方式，script和npm，版本有好几种，开发和生产，开发一般是用开发版，到了生产再换生产

创建一个vue 应用

vue应用可以理解成view和model,view一般是div 绑定标签名引用来实现(标签名一般由vue实例对象里面定义，定义了几个属性，一个是标签名，一个是数据对象data).而数据对象是可以由外部data来改的，也可以由实例化后的实例对象直接改。 如下例,data由外部定义，并且实例化成对象vm,vm.$data.b可以直接修改data的数据。多渠道可改，并可以监控data对象数据值变动。


<body>
<div id="app">
	{{b}}
</div>

<script type="text/javascript">
var data = { b : 4 };
var vm = new Vue({
	el   : "#app",
	data : data
});

vm.$watch('b', function(newVal, oldVal){
	console.log(newVal, oldVal);
})

vm.$data.b = "test9...."

</script>

</body>

vue 生命周期

  • 简单的理解就是vue实例化对象在生命 周期看来是动态的，可以捕获各阶段做一些动作。

vue 模板语法 -- 插值(模板展示数据)

  • 个人理解模板就是view,解析渲染vue实例对象定义的数据。那么模板支持哪几种数据解析呢，方式是什么，支持逻辑运算吗？

从数据角度来说，支持直接把变量的值直接解析，如果默认变量值是字符文本型

另外也支持把文本解析成html，需要加特殊的v指令才能识别，如，v-html

也支持javascript表达式逻辑运算.比如加法，还支持条件选择，函数嵌套运算，所以是非常灵活的

所以终上所述，模板是动态的，不仅是取值上动态，在解析渲染也有一套自已可以定义的方法针对数据进行解析，逻辑运算和输出。

另外还支持参数，如

<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
</script>

以下说明文档，描述更清晰 https://www.runoob.com/vue2/vue-template-syntax.html

模板语法 -- 指令

  • 指令特性的值预期是单进个JavaScript 表达式(v-for 是例外情况，稍后我们再讨论)。
  • 支持动作，比如条件判断型的是否展示页面
  • 支持绑定url到属性
  • 支持java事件的动作，如click，还支持动作嵌套和动作中止click.stop

class与 style绑定

  • div 概念 (说人话:自由组积和定义块,用标签标识块对象)
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

<div id="app">
	<div 
	class="test" 
	v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '']" 
	style="width:200px; height:200px; text-align:center; line-height:200px;">
		hi vue
	</div>
	
	<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 : "#FFFFFF",
		size : '50px',
		isRed : true
	}
});
<style>
.test{font-size:30px;}
.green{color:#00FF00;}
.active{background:#FF0000;}
</style>
</body>
</html>


如上所述div class和div style分别是三种方式在vue的逻辑里展示内容。
其中最简单最原始的就是静态的div class="test"，class是可以同时绑定多个名称的，也可以支持三元逻辑运算，上述就是列表的三元运算，如上就是用了三元运算符，所以原本应该是active :isActive,active是class name,isActive逻辑值则是vue控制是否启用这个class name. 但在启用了三元运算时，逻辑变量isActive反而放在前面来决定是否调用active或不调用。


除了class支持变量逻辑控制，style一样也支持变量逻辑控制。如上述代码，属性后的:color和:size就是变量控制的属性具体值，并且支持三元逻辑运算如isRed。

条件渲染

  • 根据条件指令v-if ,v-else-if,v-else,v-show的值来选择渲染
  • 注意v-show的特性：预渲染后由css控制展示。

列表渲染

  • for展示，可以为展示加key，按key展示
<div id="app">
	<ul>
		<li v-for="item,index in items" :key="index">
		{{index}}{{ item.message }}
		</li>
	</ul>
	<ul>
		<li v-for="value, key in object">
			{{key}} : {{ value }}
		</li>
	</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		items : [
			{ message: 'Foo' },
			{ message: 'Bar' }
		],
		object: {
			title: 'How to do lists in Vue',
			author: 'Jane Doe',
			publishedAt: '2016-04-10'
		}
	}
});
</script>

事件绑定

  • v-on 可以绑定html元素所有的事件，可能常见绑定对象是button
  • 绑定事件逻辑由函数控制，支持传入事件变量
  • 绑定事件，支持事件修饰符，如click.stop,.once,.passive,如click.stop中止单击事件。
<div id="app">
	<div id="example-1">
		<button v-on:click="counter += 1"> 数值 :  {{ counter }} </button><br />
		<button v-on:dblclick="greet('abc', $event)">Greet</button>
	</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		counter: 0,
		name : "vue"
	},
	methods:{
		greet : function (str, e) {
			alert(str);
			console.log(e);
		}
	}
});
</script>


如上代码所示，我们可以看到一个vue对象有三块组成，一块是el属性，这个属性用来绑定模板的id进行展示。
第二块是data，这块是具体的数据来源，这些数据来源用来展示或控制模板展示。
第三块是methods里的函数，函数本身也是可以由模板来调用的，如上所示是由绑定的事件调用函数。

归纳一下，我们可以看到整个vue是分为两块: 一块是view 模板展示，一块是model.
其中model是由vue对象决定，分成三块，分别是绑定view标签，data数据源，以及可调用函数方法。

无论是view模板还是model，都是动态的，他们支持if,for各种逻辑控制，支持click事件，支持生命周期事件触发，支持class,style动态变量控制和三元逻辑运算。


因此，抽象来看view与model的关系是双向协调关系。

表单进输入绑定

  • 前面我们说模板对象和vue对象是双向的关系,因此我们如下的代码展示是vue里data值是空的，跟表单绑定，表单输入之后vue的methods从data里获取相关数据再让函数针对数据逻辑运算。
<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 () {
			console.log(this.message);
			
		}
	}
});
</script>

一个输入url从ansible接口获取执行结果的案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="vue-resource.min.js" type="text/javascript" charset="utf-8"></script> 

<!--
<script src="vue-resource.min.js" type="text/javascript" charset="utf-8"></script> 
-->


</head>
<body>
<div id="app">
	<div id="example-1">url:
		<input v-model="message" placeholder="edit me">	
		<br />		
		<button type="button" @click="submit">提交</button>
	</div>
	
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		message : "http://xx/xx",
	},
	methods: {
		submit : function () {
			console.log(this.message);
		
			this.$http({  //调用接口
			                   method:'GET',
			                    url:this.message, 
			                    params:{ }
			                }).then(function(params){  //接口返回数据  
								document.write(params.body);   
			                	console.log(params);
			                },function(error){
			                });
			
			
			
		}
	}
});
</script>
<style type="text/css">

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

如何理解vue实例？

  • 一个vue对象是实现view和model的双向绑定。
  • vue 包含三大块，el绑定html选择器对象，data是渲染view数据来源，methods是具体事件触发绑定的函数方式。抽象的映射理解，一个类，除了有数据还有方式，但vue还多了一个el绑定选择器。

Vue 组件


<!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">
	<button-counter title="title1 : " @clicknow="clicknow">
		<h2>hi...h2</h2>
	</button-counter>
	<button-counter title="title2 : "></button-counter>
</div>
<script type="text/javascript">
Vue.component('button-counter', {
	props: ['title'],
	data: function () {
		return {
		  count: 0
		}
	},
	template: '<div><h1>hi...</h1><button v-on:click="clickfun">{{title}} You clicked me {{ count }} times.</button><slot></slot></div>',
	methods:{
		clickfun : function () {
			this.count ++;
			this.$emit('clicknow', this.count);
		}
	}
})
var vm = new Vue({
	el : "#app",
	data : {
		
	},
	methods:{
		clicknow : function (e) {
			console.log(e);
		}
	}
});
</script>
<style type="text/css">

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


####  组件的属性和作用
##### 组件有四个属性值

props: 组件属性 data: 数据，可关联函数 template: 模板，一般用于html显示 methods: 方法，一般关联web事件调用 组件里的methods还可以间接调用vue实例方法和传参：this.$emit('clicknow', this.count);

备注：组件的属几块组成：属性、数据(data，可以是data:关联函数），模板，方法及组件名
vue实例el绑定html的选择器，然后html相应选择器里引用组件。
props是组件属性
button-counter 组件名
avatar
文章
阅读
粉丝