作为想成为前端开发工程师的男人,学校没教框架,自己怎么不能不学呢,所以自己开始自学3大流行框架之一的Vue.js框架

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

        MVCMVVM 开发模式的区别图解

MVC开发模式

Vue.js笔记1

MVVM 开发模式
Vue.js笔记1

开始第一个vue实例的创建

  • 下载vue.js
  • 使用<script> 标签引入,Vue 会被注册为一个全局变量。
  • <script>  中实例化vue()方法。
  • 在v视图使用相关代码进行引用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>DOM</title>
		<script src="js/vue.js"></script>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--v-cloak去除未加载成功时的闪烁问题-->
			<!--{{ msg }}占位符,加载实例的数据,只覆盖占位符内容-->
			<p v-cloak> {{ msg }}</p>
			
			
			<!--v-text覆盖加载实例数据-->
			<p v-text="msg"></p>
			
			
			<!--v-html覆盖加载HTML内容-->
			<p v-html="msg1"></p>
			
			
			<!--@click相当于  v-on: 是  vue 提供的事件绑定机制 其中 @  v-on: 的缩写-->
			<!--:title相当于  v-bind: 是 vue 提供的属性绑定机制  其中 :  v-bind: 的缩写-->
			<input type="button" @click="show" value="按钮"  :title="mytitle"/>
		</div>
		
		
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data: {
					msg:'sjbgasfg',
					msg1:'<h1>我是h1</h1>',
					mytitle:'我是一个冷漠的按钮,没得感情'
				},
				methods:{
					show:function(){
						alert("但是VS发");
					}
				}
			});
		</script>
	</body>
</html>

  • 其中 vue ({
    el:''//表示绑定指定的区域
    data:{}//表示相关的参数数据
    methods:{}//自定义相关的方法
    })
  • {{ msg }} 占位符,加载实例的数据,只覆盖占位符内容
  • 指令 v-cloak 去除 {{ msg }} 占位符未加载成功时的闪烁问题
  • 指令 v-text 覆盖加载实例数据,会覆盖标签内的所有内容
  • 指令 v-html 覆盖加载HTML内容,会覆盖标签内的所有内容
  • 指令 @click 相当于 v-on: 是 vue 提供的事件绑定机制,其中 @ 是 v-on: 的缩写
  • 指令 :title 相当于 v-bind:title 是 vue 提供的属性绑定机制 其中 : 是v-bind: 的缩写

我们的征途是星辰大海