VUE JS基础语法及入门

65 阅读 0 评论 43 点赞

我是靠谱客的博主忧郁芝麻，最近开发中收集的这篇文章主要介绍VUE JS基础语法及入门，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

官网下载vue文件，在HBuild X中引入vue js

1.vue入门

语法规则：vue中必须定义根目录标签

编辑vue js

<script>
			// var 的弊端：没有作用域的概念，如果变量名称重复会引发问题
			// let  有作用域的概念
			// const  常量  全局唯一，不可更改
			const app = new Vue({
				// 标识vue对象的作用范围
				el: "#app",
				// 定义数据对象
				data: {
					hello: "HelloVue"
				}
			})
</script>

利用插值表达式，获取数据（div标签要放在script标签之前，vue要引用标签所以标签必须先加载出来引用时才能生效）

<div id="app">
			
		{{hello}}
</div>

最后效果

<body>
		<div id="app">
			{{hello}}
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					hello: "HelloVue"
				}
			})
		</script>
</body>

（1）v-click：当程序编译结束时，v-vlock的隐藏效果将不起作用，当程序没有编译结束时，v-clock的隐藏效果有效

    <head>
        <style type="text/css">
			/* 为属性定义样式 */
			[v-clock]{
				/* 定义样式不显示 */
				display: none;
			}
		</style>
    </head>
    <body>
        <div id="app" v-cloak>
			{{hello}}
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					hello: "HelloVue"
				}
			})
		</script>
    </body>

2.vue数据展现

先在页面最后设置好script标签

    <script>
		const app = new Vue({
			el: "#app",
			data: {
				hello: "您好Vue",
				html: "<h1>好好学习，天天向上</h1>",
				one: "java学习",
				name: "admain"
			}
		})
    </script>

（1）Mustache：插值表达式

<h3>{{hello}}</h3>

（2）v-text：数据展现，当数据没有解析成功时，页面没有任何数据，是v-clock的升级版

<h3 v-text="hello"></h3>

（3）v-html：将数据按照html形式解析，有时候页面中的部分数据来自于其他服务器，远程服务器返回的是html代码片段，如果需要，会将代码片段渲染为页面形式

<div v-html="html"></div>

（4）v-pre：跳过这个元素和它的子元素的编译过程，可以用来显示Mustache标签。跳过大量没有指令的节点，会加快编译。当需要展示原始的Mustache标签不需要程序编译时可以使用。

<div v-pre>{{hello}}</div>

（5）v-once：数据只允许渲染一次

<div v-text="one" v-once></div>

（6）v-model：双向数据绑定，data中的数据发生变化时页面数据随时更新

    <div style="border: aliceblue;">
		<h3>双向数据绑定</h3>
		用户名：<input type="text" name="name" v-model="name" />
    </div>

3.vue事件绑定

（1）事件

    <body>
		<div id="app">
			<h1 v-text="number"></h1>
			<button v-on:click="number++">自增</button>
			<!-- 简化操作 -->
			<button @click="addNum">加1</button>
			<button @click="addNum2">自增2</button>
			<button @click="subNum">自减2</button>
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: "#app",
				data: {
					number: 1
				},
				methods: {
					addNum:function(){
						this.number++
					},
					// addNum方法的简化操作
					addNum2(){
						this.number += 2
					},
					subNum(){
						this.number -= 2
					}
				}
			})
		</script>
		
	</body>

页面展示结果，可以对数字进行加减运算

（2）事件冒泡：如果事件之间有嵌套关系，执行完成内部事件之后执行外部事件，这种现象称为事件冒泡，阻止事件冒泡：后面.stop

    <div id="app" @click="addNum2">
		<h3>{{number}}</h3>
		<button @click="addNum">增1</button>
	</div>
    <script src="../js/vue.js"></script>
	<script type="text/javascript">
		const app = new Vue({
			el: "#app",
			data: {
				number: 1
			},
			methods: {
				addNum:function(){
					this.number++
				},
				addNum2(){
					this.number += 2
				},
			}
		})
	</script>

（3）@click.prevent：阻止默认行为，如果需要阻止标签的默认行为则添加 @click.prevet

<div id="app">
	<a href="" @click.prevent="baidu" >百度</a>
</div>
  //超链接默认会跳转到指定页面，用@click.prevent阻止它的默认行为
<script type="text/javascript">
	const app = new Vue({
		el: "#app",
		data: {
		},
		methods: {
			baidu(){
				console.log(`跳转百度`);
			}
		}
	})
</script>

（4）特殊按键字符说明（F12键可以查看结果）

<div id="app">
	<h3>常用特殊按键字符说明</h3>
	回车键触发：<input type="text" name="username" type="text" @keyup.enter="handler"/> <br>
	删除键触发：<input type="text" name="age" type="text" @keyup.delete="handler" /> <br>
	space键触发：<input type="text" name="sex" type="text" @keyup.space="handler" /> <br>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
	const app = new Vue({
		el: "#app",
		data: {
        },
		methods: {
        handler(){
			console.log("函数被点击");
		}
    })
</script>

（5）计算器：要求，输入完B之后，回车键触发计算加法操作

    <body>
		<div id="app">
			数据A：<input type="text" v-model="num1"/>
			数据B：<input type="text" v-model="num2" @keyup.enter="add"/>
			总 和：<span v-text="count"></span>
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: "#app",
				data: {
					num1: '',
					num2: '',
					count: ''
				},
				methods: {
					add(){
						this.count = parseInt(this.num1) + parseInt(this.num2)
					}
				}
			})
		</script>
	</body>

4.vue属性绑定

（1）属性绑定

<div id="app">
    <a v-bind:href="url">百度-vue1</a>
    <!-- 简化 -->
	<a :href="url">百度-vue2</a>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
	const app = new Vue({
		el: "#app",
		data: {
			url: "http://www.baidu.com"
		},
		methods: {	
		}
	})
</script>

（2）样式绑定（点击切换可进行央视的切换）

<div id="app">
    <h3>样式绑定</h3>
	<!-- 需求：控制red是否展现 -->
	<div class="red">AAAAAAAAAAA</div>
	<div :class="{red:flage}">BBBBBBBBBBBBB</div>
	<button @click="flage = !flage">切换</button>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
	const app = new Vue({
		el: "#app",
		data: {
            flage: true
	    },
        methods: {		
		}
        })
</script>