vue入门基础案例

最新推荐文章于 2024-09-23 22:03:38 发布

Ernest ZZ

最新推荐文章于 2024-09-23 22:03:38 发布

阅读量1.3k

点赞数 1

分类专栏： html-js 文章标签： javascript css vue.js html html5

本文链接：https://blog.csdn.net/zhangzhouisme/article/details/106493893

版权

html-js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

炒菜背景

由于最近大家都喜欢vue这道菜，正好也在建站，所以就分享一下vue的原汁原味做法（基于官网的demo说明）。

之乎者也

Vue（读作/vjuː/，类似于view）是一个用于构建用户界面的渐进式框架。与其他单体框架不同，Vue从一开始就设计为可增量采用。核心库只关注于视图层，并且很容易与其他库或现有项目进行拾取和集成。另一方面，当与现代工具和支持库结合使用时，Vue也完全能够为复杂的单页应用程序提供支持。

菜名-八仙过海

如下是8个基础demo，都放在html文件中，可以直接运行，你按照这个就可以完成vue入门。

<!DOCTYPE html>
<html>
	<head>
		<title>My first Vue app</title>
		//引入vue支持的包 "https://unpkg.com/vue"
		<br/>
		<script src="https://unpkg.com/vue"></script>
	</head>
	<body>
		//1、定义一个div，id=app，通过var app=new Vue({el: '#app',data:{}})完成双向绑定。即js函数中data:数据的改变和页面元素数据改变是关联的。
		<div id="app">
			{{ message }}
		</div>
		<br>
		
		//2、v符号是vue特有标识，v-bin绑定title，可以灵活绑定该span的title渲染
		<div id="app-2">
			<span v-bind:title="message">
				Hover your mouse over me for a few seconds
				to see my dynamically bound title!
			</span>
		</div>
		<br />
		
		//3、v-if 通过js的seen:true/false 来实现元素的显示/隐藏
		<div id="app-3">
		  <span v-if="seen">Now you see me</span>
		</div>
		<br />
		
		//4、 v-for 循环的使用。你可以在 js控制台 输入：app4.todos.push({text:'hh'});从而通过js代码灵活加入新的元素。
		<div id="app-4">
		  <ol>
		    <li v-for="todo in todos">
		      {{ todo.text }}
		    </li>
		  </ol>
		</div>
		<br />
		
		//5、 v-on 绑定事件,v-on:click点击事件，来颠倒p标签内容。通过app5对象的methods来设置对应函数reverseMessage，
		
		<div id="app-5">
		  <p>{{ message }}</p>
		  <button v-on:click="reverseMessage">Reverse Message</button>
		</div>
		<br />
		
		//6、v-model指令，使表单输入和应用程序状态之间的双向绑定变得轻而易举：
		<div id="app-6">
		  <p>{{ message }}</p>
		  <input v-model="message">
		</div>
		<br/>
		
		//7、定义组件，如下组件todo-item例子简单地实现了绑定。（注：vue组件和Custom Elements 自定义元素类似，定义符合Web Components Spec网络组件规范标准。当然vue有更强的兼容性，如ie9+；
		<br/>
		//且Vue组件提供了普通自定义元素中不可用的重要功能，尤其是跨组件数据流、自定义事件通信和生成工具集成。）
		<div id='app-7'>
			<ol>
			  <!--组件的使用需要也需要完成app-7的绑定。 -->
			  <todo-item></todo-item>
			  
			</ol>
		</div>
		<br />
		
		//8、组件的进一步应用,如下实例，首先 v-for 循环获取每行数据item，之后item绑定到组件属性todo，item.id绑定到组件属性key1。从而根据组件template渲染能数据
		<br />
		//（注意：启动绑定的key 属性不生效，可能由于key是关键字，key1是可以的。）
		<div id="app-8">
		  <ol>
		    <!--
		      Now we provide each todo-item with the todo object
		      it's representing, so that its content can be dynamic.
		      We also need to provide each component with a "key",
		      which will be explained later.
		    -->
		    <todo-item
		      v-for="item in groceryList"
		      v-bind:todo="item"
		      v-bind:key="item.id"
			  v-bind:key1="item.id"
		    ></todo-item>
		  </ol>
		</div>
		
		
		
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					message: 'Hel2lo Vue1!'
				}
			})

			var app2 = new Vue({
				el: '#app-2',
				data: {
					message: 'You loaded this page on ' + new Date().toLocaleString()
				}
			})
			
			var app3 = new Vue({
			  el: '#app-3',
			  data: {
			    seen: true
			  }
			})
			
			var app4 = new Vue({
			  el: '#app-4',
			  data: {
			    todos: [
			      { text: 'Learn JavaScript' },
			      { text: 'Learn Vue' },
			      { text: 'Build something awesome' }
			    ]
			  }
			})
			
			var app5 = new Vue({
			  el: '#app-5',
			  data: {
			    message: 'Hello Vue.js!'
			  },
			  methods: {
			    reverseMessage: function () {
			      this.message = this.message.split('').reverse().join('')
			    }
			  }
			})
			
			var app6 = new Vue({
			  el: '#app-6',
			  data: {
			    message: 'Hello Vue!'
			  }
			})
			
			/* //app-7 组件 */
			Vue.component('todo-item', {
				template:'<li>this is a todo li</li>'
			})
			var aap7 = new Vue({
				el:'#app-7',
			})
			
			/* app-8 组件  */
			Vue.component('todo-item', {
			  // The todo-item component now accepts a
			  // "prop", which is like a custom attribute.
			  // This prop is called todo.
			  props: ['todo','key1'],
			  template: '<li >值:{{key1}}:{{todo.text }}</li>'
			})
			var app8 = new Vue({
			  el: '#app-8',
			  data: {
			    groceryList: [
			      { id: 0, text: 'Vegetables' },
			      { id: 1, text: 'Cheese' },
			      { id: 2, text: 'Whatever else humans are supposed to eat' }
			    ]
			  }
			})
			
			
		</script>

	</body>
</html>