vue入门基础案例

炒菜背景

由于最近大家都喜欢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:'
  • this is a todo 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: '
  • 值:{ {key1}}:{ {todo.text }}
  • '
    }) 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>

    你可能感兴趣的:(html-js,javascript,css,vue.js,html,html5)