Vue

最新推荐文章于 2023-06-08 22:07:49 发布

XiaoZJun

最新推荐文章于 2023-06-08 22:07:49 发布

阅读量148

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/XiaoZJun/article/details/108077561

版权

Vue入门

Vue.js是什么？

Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架

官网：https://cn.vuejs.org/
Vue作者：尤雨溪/中国无锡

库和框架的区别

1 库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者
代表：jQuery
jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

2 框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码
代表：vue
框架规定了自己的编程方式，是一套完整的解决方案
使用框架的时候，由框架控制一切，我们只需要按照规则写代码
框架的侵入性很高(从头到尾)

基本练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>VUE</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 1.插值 -->
		<div id="app">
			<ul>
				<li>
					<p>
						<title>={{title}},ts={{ts}}
					</p>
				</li>
				<li>1.2html</li>
				<div v-html="html"></div>
				<li>1.3属性</li>
				<div>
					<a href="https://www.baidu.com">百度</a>
					<a v-bind:href="href">新浪</a>
					<input type="button"  value="点我" v-on:click="onClick" />
				</div>
				<li>1.4表达式</li>
				{{str.substr(0,6).toUpperCase()}}
				{{ number + 1 }}
				{{ ok ? 'YES' : 'NO' }}
				<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
			</ul>
		</div>
	</body>
	
	<script>
		var vm =new Vue({
			el:'#app',
			data:function(){
			  return{
				  title:'hello Vue',
				  ts:new Date().getTime(),
				  html:'<input type="text" value=0>',
				  href:'http://www.sina.com',
				  str:'hello vue',
				  number:10,
				  ok:false,
				  id:22
			  }	
			},
			methods:{
				onClick(){
					alert(1111);
			}
			}
		});
	</script>
</html>