Vue学习----第一课

最新推荐文章于 2023-08-21 13:43:22 发布

大炜丶

最新推荐文章于 2023-08-21 13:43:22 发布

阅读量207

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/nw336699/article/details/81132357

版权

vue.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.Vue是什么

2.Vue安装

3.Vue实例

1.Vue是什么

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

2.Vue安装

直接使用<script>引入

https://vuejs.org/js/vue.js

3.Vue实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" >
		<title>Vue1-1</title>
	</head>
	<body>
		<script src="https://unpkg.com/vue"></script>
		<!-- 声明式渲染-->
		<div id="app">
			 <p>{{ message }}</p>
		</div>

		<div id="app-2">
			<span v-bind:title="message">
				鼠标悬停几秒钟查看此处动态绑定的提示信息！
			</span>
		</div>
		<!-- 条件与循环-->
		<div id="app-3">
			<p v-if="seen">现在你看到我了</p>
		</div>

		<div id="app-4">
			<ol>
				<li v-for="todo in todos">
					{{ todo.text }}
				</li>
			</ol>
		</div>
		
		<!-- 处理用户输入-->
		<div id="app-5">
			<p>{{message}}</p>
			<button v-on:Click="reverseMessage">逆转消息</button>
		</div>
		
		<div id="app-6">
			<p>{{message}}</p>
			<input v-model="message" />
		</div>
		
		<!-- 组件化应用构建-->
		<div id="app-7">
			<ol>
			<!-- 
				现在我们为每一个 todo-item 提供todo对象
				todo 对象是变量，即其内容可以是动态的。
				我们也需要为每一个组件提供一个“key”。
			-->
				<todo-item
					v-for="item in groceryList"
					v-bind:todo="item"
					v-bind:key = "item.id">
				</todo-item>
			</ol>
		</div>
		
		
		<script>
			new Vue({
			  el: '#app',
			  data: {
				message: 'Hello Vue.js!'
			  }
			})
			
			var app2 = new Vue({
				el : '#app-2',
				data : {
					message : '页面加载于 ' + new Date().toLocaleString()
				}
			})
		
			var app3 = new Vue({
				el : '#app-3',
				data : {
					seen : true
				}
			})
			
			var app4  = new Vue({
				el : '#app-4',
				data : {
					todos : [
						{text : '学习 JavaScript'},
						{text : '学习 Vue'},
						{text : '整个牛项目'}
					]
				}
			})
			
			var app5 = new Vue({
				el: '#app-5',
				data :{
					message : 'Hellow Vue.js'
				},
				methods: {
					reverseMessage: function(){
						this.message = this.message.split('').reverse().join('')
					}
				}
			})
			
			var app6 = new Vue({
				el : '#app-6',
				data : {
					message : 'Hello Vue'
				}
			})
			
			Vue.component('todo-item',{
				//todo-item 组件现在接受一个“props”，类似一个自定义特性
				// 这个props命名为todo
				props:['todo'],
				template: '<li>{{ todo.text}}</li>'
			})
			
			
			


			
			var app7 = new Vue({
				el: '#app-7',
				data: {
					groceryList: [
						{id: 0 , text:'蔬菜'},
						{id: 1 , text:'奶酪'},
						{id: 2 , text:'随便其他什么'}
					]
				}
			})
		</script>
	</body>
</html>

以上来自于https://cn.vuejs.org/v2/guide/index.html

大炜丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习----第一课

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

扫一扫