vue学习1（各种基础的指令）-优快云博客

本文链接：https://blog.youkuaiyun.com/object_oriented/article/details/97278729

本文详细介绍Vue.js的基础知识，包括如何引入Vue.js，实现数据绑定、条件渲染、列表渲染、事件处理等基本操作，并讲解Vue的一些核心属性如methods、computed、watch的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、学习vue需要的开始准备：

1.准备引入vue要引入的vue的js文件

可以去官网下载：https://cn.vuejs.org/v2/guide/installation.html

也可以在线引入：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

2.这样就可以进行vue的学习了

下面给出一个helloworld的入门案例

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<!--	响应式设计	 -->
		 <meta name="viewport" content="width=device-width, initial-scale=1"/>
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>Document</title>
		<link rel="stylesheet" href="template.css" />
		<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body id="app">
		<h1>{{message}}</h1>
		<script>
			// 这是我们的Model
			var exampleData = {
				message: 'Hello World!'
			}

			// 创建一个 Vue 实例或 "ViewModel"
			// 它连接 View 与 Model
			new Vue({
				el: '#app',
				data: exampleData
			})
	 </script>
		
		
	</body>
</html>

在vue中htm从js中拿到数据是通过{{ }}两个花括号进行的。

二、一些基础的标签

1.v-model：实现双向数据绑定

用法：在标签上添加v-model=“ 绑定的变量名”

        <body id="app">
		<h1>{{message}}</h1>
		<input type="text" v-model="message"/>
		<script>
			// 这是我们的Model
			var exampleData = {
				message: 'Hello World!'
			}

			// 创建一个 Vue 实例或 "ViewModel"
			// 它连接 View 与 Model
			new Vue({
				el: '#app',
				data: exampleData
			})
	         </script>
	</body>

2.v-if：
使用方法：v-if="表达式"，判断

    <body id="app">
		 <h3>hello   {{name}}</h3>
		<h1 v-if="age>18">{{no}}</h1>
		<h2 v-if="age<=18">{{yes}}</h2>
		
	<script>
			// 这是我们的Model
			var exampleData = {
				yes:"你还是个孩子",
				no:"你不再年轻",
				age:18,
				name:"array"
			}

			// 创建一个 Vue 实例或 "ViewModel"
			// 它连接 View 与 Model
			new Vue({
				el: '#app',
				data: exampleData
			})
	 </script>
</body>

3.v-show:
使用方法：v-show="表达式"
感觉和v-if使用很相似如果v-show="true"该标签里面的节点就会被显示出来，否则隐藏

        <body id="app">
		<h3>hello   {{name}}</h3>
		<h1 v-show="age>18">{{no}}</h1>
		<h2 v-show="age<=18">{{yes}}</h2>
		<h3 v-show="true">hahahahahahahahhaha</h3>
		
		<script>
			// 这是我们的Model
			var exampleData = {
				yes:"你还是个孩子",
				no:"你不再年轻",
				age:18,
				name:"array"
			}

			new Vue({
				el: '#app',
				data: exampleData
			})
	        </script>
	</body>

4.v-else：
可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。

        <body id="app">
		<h3>hello</h3>
		<h3 v-show="name.indexOf('obj')!=-1">   {{name}}</h3>
		<h3 v-else>{{nickname}}</h3>

		<h1 v-if="age>18">{{no}}</h1>
		<h2 v-else>{{yes}}</h2>
		
		<script>
			// 这是我们的Model
			var exampleData = {
				yes:"你还是个孩子",
				no:"你不再年轻",
				age:18,
				name:"object",
				nickname:"那个"
			}

			// 创建一个 Vue 实例或 "ViewModel"
			// 它连接 View 与 Model
			new Vue({
				el: '#app',
				data: exampleData
			})
	        </script>
	</body>

5.v-for
就是一个循环的作用persons是在js里面定义的数组，person是遍历的每一个变量名

        <body id="app">
		<table class="table">
			<thead>
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>籍贯</th>
			</tr>
			</thead>
			<tbody>
			<tr v-for="person in persons">
				<td>{{ person.id }}</td>
				<td>{{ person.name }} </td>
				<td>{{ person.sex }}</td>
				<td>{{ person.ads }}</td>
			</tr>
			</tbody>
		</table> 
			
		<script>
			// 这是我们的Model
			var exampleData = {
				persons:[
				{
				id:'2015132031',
				name:'array',
				sex:'女',
				ads:'四川'
				},
				{
				id:'2015132032',
				name:'李二狗',
				sex:'女',
				ads:'黑龙江'
				},
				{
				id:'2015132033',
				name:'object',
				sex:'男',
				ads:'广东'
				},
				{
				id:'2015132034',
				name:'张三',
				sex:'女',
				ads:'河南'
				}
				]
			}

			// 创建一个 Vue 实例或 "ViewModel"
			// 它连接 View 与 Model
			new Vue({
				el: '#app',
				data: exampleData
			})
	 </script>

6.v-bind：用来绑定属性
   用法：v-bind:属性="",例如：       v-bind:class="sp1",或者是其他的属性 v-bind:href=""
       可以简写成: :属性=“”，例如： :class="sp1", 或者           :href=""
       对于这种大括号的在属性上进行绑定是最好不用的有的标签就不支持所以就最好使用bind进行绑定。

        <body>
		<div id="app" >
			<a v-bind:href="url">链接<a>
			<img v-bind:src="imgUrl">
			<h3 class="{{claName}}">对与这种大括号的在属性上进行绑定是最好不用的有的标签就不支持
				所以就最好使用bind进行绑定。
			</h3>
			<a :href ="url">链接<a>
			<img :src="imgUrl">
		</div>
		<script>
			var app =new Vue({
				el :' #app ',
				data: {
					url:'https://www.github.com',
					imgUrl:'1.png',
					claName:'bg'

				}
			})
		</script>
     </body>

7.v-once:一次绑定

用法直接在html元素上添加v-once即可

v-once这个指令不需要任何表达式，它的作用就是定义它的元素或组件只会渲染一次，包括元素或者组件的所有字节点。首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，那么该块都将被视为静态内容。

8.v-on：是一个事件的监听
用法：v-on:click="函数名"
另一种写法：@click="函数名"

<body id="app">
		<h3 >hello   {{name}}</h3>
		<h3 id="ha" v-once> {{haha}}</h3>
		<button  v-on:click="add">加1</button>
		<h2 v-once>{{count}}</h2>
		
		<script>
			// 这是我们的Model
			var exampleData = {
				name:"array"
			}


			// 创建一个 Vue 实例或 "ViewModel"
			// 它连接 View 与 Model
			var vue = new Vue({
				el: '#app',
				data:{
					exampleData,
					haha:'haah',
					count:10

				},
				methods:{
					add:function(){
						this.count++;

						console.log(this.count);
					
					}
				}
				
			})
		
		</script>
		
	</body>

三、vue的一些属性

1.methods:

这里是写一些普通的方法

写法：

var vue = new Vue({
	el: '#app',
	data:{
	    exampleData,
	    haha:'haah',
	    count:10

	    },
	     methods:{
		add:function(){
		    this.count++;
                    console.log(this.count);
					
		}
	    }
				
})

2.computed：

与methods属性相比computed的一个特性就是他的结果是不会被再次刷新的，只要访问的数据不发生改变，这个属性就不会刷新
这样就减少了每次浏览器刷新computed属性刷新所带来的开销

var vue = new Vue({
	el: '#app',
	data: exampleData,
	    computed:{
	    Fnreverse:function(){
		return this.name.split('').reverse().join('');
					
	    }，
	    now: function () {
		return Date.now()
	     }
				
	    }
					
})

3.computed下的getter和setter

var vue = new Vue({
                el: '#app',
                data: exampleData,
                computed:{
                    fullName: {
                        // getter 函数
                        get: function () {
                          
                          return this.firstName + ' ' + this.lastName
                        },
                        // setter 函数
                        set: function (newValue) {
                          var names = newValue.split(' ');
                          this.firstName = names[0];
                          this.lastName = names[names.length - 1];
                          console.log(this.lastName);
                        }
                     }
                
                }
                    
            })
            vue.fullName = "he hua";

在设置vue.fullName = "he hua";或调用里面的set函数，控制台将会打印出hua

4.watch:在vue下的watch属性虽然很多时候都比不上computed属性来得好用但有些特定场景也是需要用到
比如我们需要时刻监听某个数据的变化，当这个数据发生变化时我们要做出一些操作
它的用法和computed差不多