Vue应用（一）---基本使用

最新推荐文章于 2024-07-01 09:28:58 发布

hurricane_li

最新推荐文章于 2024-07-01 09:28:58 发布

阅读量274

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/hurricane_li/article/details/80680410

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

vue的使用只需要引入一个vue.min.js，可直接引用https://cdn.bootcss.com/vue/2.2.2/vue.min.js。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
	<div id="app">
	  {{ message }}
	</div>
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data: {
		    message: 'Hello Vue!'
		  }
		})
	</script>
	
	<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>
	<script type="text/javascript">
		var app2 = new Vue({
		  el: '#app-2',
		  data: {
		    message: 'You loaded this page on ' + new Date().toLocaleString()
		  }
		})
	</script>

	<div id="app-3">
	  <span v-if="seen">Now you see me</span>
	</div>
	<script type="text/javascript">
		var app3 = new Vue({
		  el: '#app-3',
		  data: {
		    seen: true
		  }
		})
	</script>

	<div id="app-4">
	  <ol>
	    <li v-for="todo in todos">
	      {{ todo.text }}
	    </li>
	  </ol>
	</div>
	<script type="text/javascript">
		var app4 = new Vue({
		  el: '#app-4',
		  data: {
		    todos: [
		      { text: 'Learn JavaScript' },
		      { text: 'Learn Vue' },
		      { text: 'Build something awesome' }
		    ]
		  }
		})
	</script>

	<div id="app-5">
	  <p>{{ message }}</p>
	  <button v-on:click="reverseMessage">Reverse Message</button>
	</div>
	<script type="text/javascript">
		var app5 = new Vue({
		  el: '#app-5',
		  data: {
		    message: 'Hello Vue.js!'
		  },
		  methods: {
		    reverseMessage: function () {
		      this.message = this.message.split('').reverse().join('')
		    }
		  }
		})
	</script>

	<div id="app-6">
	  <p>{{ message }}</p>
	  <input v-model="message">
	</div>
	<script type="text/javascript">
		var app6 = new Vue({
		  el: '#app-6',
		  data: {
		    message: 'Hello Vue!'
		  }
		})
	</script>

	<div id="app-7">
	  <ol>
	    <todo-item
	      v-for="item in groceryList"
	      v-bind:todo="item"
	      v-bind:key="item.id">
	    </todo-item>
	  </ol>
	</div>
	<script type="text/javascript">
		Vue.component('todo-item', {
		  props: ['todo'],
		  template: '<li>{{ todo.text }}</li>'
		})

		var app7 = new Vue({
		  el: '#app-7',
		  data: {
		    groceryList: [
		      { id: 0, text: 'Vegetables' },
		      { id: 1, text: 'Cheese' },
		      { id: 2, text: 'Whatever else humans are supposed to eat' }
		    ]
		  }
		})
	</script>

	
</body>
</html>

组件系统时vue的一个重要的理论，因为vue的抽象特性，允许我们使用小的、自我包含、通常情况下可重用的组件来组成大规模的应用，如果我们思考一下，可以想到任何类型的应用接口可以被抽象为一个组件树。组件是vue的重要的拥有预定义选项的元素。在vue中，注册一个组件是非常简单的。在大型的应用中，应将整个应用拆分成组件来使得开发变得更方便管理。

vue的组件与传统的html组件非常相似，区别在于：

1.html的部分标签并不能确定被任何浏览器实现了。相对的，vue的组件并不需要浏览器过多的支持并且在所有支持的浏览器上工作一致。

2.vue组件提供了一些传统html标签不具备的重要的特性：跨组件的数据流、自定义事件交互和构建工具集成。

参考网址：

https://vuejs.org/v2/guide/

hurricane_li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue应用（一）---基本使用

vue的使用只需要引入一个vue.min.js，可直接引用https://cdn.bootcss.com/vue/2.2.2/vue.min.js。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="https:
复制链接

扫一扫

专栏目录