vue的入门与指令

最新推荐文章于 2023-05-17 19:46:30 发布

kangswx

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量100

点赞数

分类专栏： vue 文章标签： vue安装 vue指令 vue入门

本文链接：https://blog.csdn.net/kangswx/article/details/103215336

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

下载vue.js
首先需要在本机安装node.js
使用命令行进入到需要下载的文件夹下
使用如下的命令下载vue
```
npm install vue
```
然后就会在所在的路径下面找到vue的文件，如下图
在node_modules\vue\dist下就可以找到vue.js的文件

创建第一个vue的文件

<!DOCTYPE html>
<html>
<head>
	<title>第一个vue页面</title>
</head>
<body>
	<div id="app"></div>
	
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',  
			template:`  
				<div>
					<div>这里是模板内容{{msg}}</div>
					<div>111</div>
				</div>
			`,  //template下只能有一个根节点
			data:function(){
				return {
					msg:'Hello Vue!'
				}
			}
		})
	</script>
</body>
</html>

指令：
1. 在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫指令
2. 在vue中v-xxx就是vue的指令
3. 指令就是以数据去驱动DOM行为的，简化DOM操作
常用的指令
1. v-text，元素的innerText,必须是双标签
2. v-html, 元素的innerHtml
3. v-if，判断是否插入 append remove
4. v-else-if
5. v-else
6. v-show,判断是否隐藏，display:none
7. v-for
  - 数组 item, index
  - 对象value, key, index

v-text的使用实例

<!DOCTYPE html>
<html>
<head>
	<title>v-text指令</title>
</head>
<body>
	<div id="app"></div>

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			template: `
				<div>
					<div v-text='mytext'></div>
				</div>
			`,
			data:function(){
				return {
					mytext: '<h1>这里是v-text</h1>'
				}
			}
		})
	</script>
</body>
</html>

v-html的使用示例

<!DOCTYPE html>
<html>
<head>
	<title>v-html指令</title>
</head>
<body>
	<div id="app"></div>

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			template: `
				<div v-html='myhtml'></div>
			`,
			data: function(){
				return {
					myhtml: '<h2>这里是v-html</h2>'
				}
			}
		})
	</script>
</body>
</html>

v-if使用示例

<!DOCTYPE html>
<html>
<head>
	<title>v-if指令</title>
</head>
<body>
	<div id="app"></div>
	
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			template: `
				<div>
					<div v-html='myhtml'></div>
					</hr>
					<button v-if='checkvif'>测试v-if</button>
				</div>
			`,
			data: function(){
				return {
					myhtml: '<h1>这里是v-html</h1>',
					checkvif: true
				}
			}
		})
	</script>
</body>
</html>

v-if, v-else-if, v-else使用示例

<!DOCTYPE html>
<html>
<head>
	<title>v-if指令</title>
</head>
<body>
	<div id="app"></div>
	
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			template: `
				<div>
					<div v-html='myhtml'></div>
					</hr>
					<button v-if='num==1'>测试v-if</button>
					<button v-else-if='num==2'>测试v-else-if</button>
					<button v-else='num==3'>测试v-else</button>
				</div>
			`,
			data: function(){
				return {
					myhtml: '<h1>这里是v-html</h1>',
					num: 1
				}
			}
		})
	</script>
</body>
</html>

v-show使用示例

<!DOCTYPE html>
<html>
<head>
	<title>v-show指令(隐藏与展示)</title>
</head>
<body>
	<div id="app"></div>

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			template: `
				<div>
					<div v-html='myhtml'></div>
					</hr>
					<div v-show='checkshow'>这里是v-show</div>
				</div>
			`,
			data: function(){
				return {
					myhtml: '<h1>这里是v-html</h1>',
					checkvif: true,
					num: 1, 
					checkshow:false
				}
			}
		})
	</script>
</body>
</html>

v-for的使用示例(数组)：

<!DOCTYPE html>
<html>
<head>
	<title>v-for指令(数组)</title>
</head>
<body>
	<div id="app"></div>

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			template: `
				<div>
					<div v-html='myhtml'></div>
					</hr>
					<ul>
						<li v-for='(item, index) in arrayFor'>{{ index }} - {{ item }}</li>
					</ul>
				</div>
			`,
			data: function(){
				return {
					myhtml: '<h1>这里是v-html</h1>', 
					arrayFor: ['篮球', '足球', '乒乓球', '羽毛球']
					
				}
			}
		})
	</script>
</body>
</html>

v-for(对象)使用示例

<!DOCTYPE html>
<html>
<head>
	<title>v-for指令(对象)</title>
</head>
<body>
	<div id="app"></div>

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			template: `
				<div>
					<div v-html='myhtml'></div>
					</hr>
					<ul>
						<li v-for='(oj, key) in objFor'>{{ key }} - {{ oj }}</li>
					</ul>
				</div>
			`,
			data: function(){
				return {
					myhtml: '<h1>这里是v-html</h1>', 
					objFor: {name:'张三', age:15, phone:'18699999999'}
					
				}
			}
		})
	</script>
</body>
</html>

kangswx

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue的入门与指令

下载vue.js首先需要在本机安装node.js使用命令行进入到需要下载的文件夹下使用如下的命令下载vuenpm install vue然后就会在所在的路径下面找到vue的文件，如下图在node_modules\vue\dist下就可以找到vue.js的文件创建第一个vue的文件<!DOCTYPE html><html>&...
复制链接

扫一扫