Vue-01

最新推荐文章于 2025-04-24 00:00:00 发布

原创最新推荐文章于 2025-04-24 00:00:00 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

语言学习专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍Vue.js的基础知识，包括Hello应用体验、Vue实例挂载、数据绑定、表达式使用、指令详解等内容，适合初学者快速入门。

一.Vue入门

1.Hello应用体验

创建一个web工程，在一个html中引入vue的文件。：
依赖资源：
在这里插入图引入资源文件：片描述
引入资源文件：
在这里插入图片描述
Demo：

<body>
<div id="app">
    <!--取值-->
    {{message}}
</div>
<!--引入vue的依赖文件-->
<script type="text/javascript" src="js/vue/vue.min.js"></script>
<script type="text/javascript">
    /*创建一个vue对象：app：
    * el：这个对象挂载到id=app的元素上；
    * data：这个对象的数据：一个json格式
    * */
    var app=new Vue({
        el:"#app",
        data:{
            "message":"hello vue"
        }
    });
</script>
</body>

2.Vue实例挂载(el)的标签

每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。实例上的属性和方法只能够在当前实例挂载的标签中使用。

<div id="app">
		<h1>{{message}}</h1>
	</div>
<div class="wbTest">
    {{wbColor}}
</div>
	<!-- 引入vue文件 -->
	<script type="text/javascript" src="js/vue/vue.min.js"></script>
	<script type="text/javascript">
		/* 
		  使用构造函数创建一个vue对象：
		  这个对象作用与哪一个html标签，是通过el属性来挂载的，常用的有id和class挂载方式：
		  id挂载:el:"#id"
		  class挂载：el:".class"
		 */
		//id挂载方式：
		var app = new Vue({
			el : "#app",
			data : {
				message : "我是id挂载方式"
			}
		});
		//class挂载方式：
		var wbTest=new Vue({
    el:".wbTest",
    data:{
        "wbColor":"pink我的最爱"
    }
});
</script>

3.Vue中的数据(data)详解

1.Vue实例的数据保存在配置属性data中, data自身也是一个对象.
2. 通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上

<div id="app">
		<h1>{{message}}</h1>
		<h1>
			{{user.name}},今年才:{{user.age}}岁.{{user.color}}<font color="pink">是一个很美丽的颜色</font></br>
		</h1>
	</div>
	<!-- 引入vue文件 -->
	<script type="text/javascript" src="js/vue/vue.min.js"></script>
	<script type="text/javascript">
     //vue的数据绑定在data属性上，data本身也是一个对象
		var app = new Vue({
			el : "#app",
			data : {
				message : "我是一个很单纯的p",
				user : {
					name : "隔壁老文",
					age : 17,
					color : "pink"
				}
			}
		});
		//Vue实例的数据保存在配置属性data中, data自身也是一个对象.
	    // 通过Vue实例直接访问data对象中的数据,及时同步的页面上
	    alert(app.message);
		// // 通过Vue实例直接修改data对象中的数据,及时同步的页面上
		app.message="p被修改了--》pp";
		app.user.name="老王";
	</script>

4.Vue中的方法(methods)详解

1.Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体
2.方法都是被Vue对象调用,所以方法中的this代表Vue对象
3. 使用方式
3.1 直接在html模板标签中调用
{{方法名字()}}
3.2 js中通过Vue对象实例调用方法
vue对象.方法名字();

<div id="app">
		方法的调用②直接在html模板标签中调用：
		{{say()}}
	</div>
	<!-- 引入vue文件 -->
	<script type="text/javascript" src="js/vue/vue.min.js"></script>
	<script type="text/javascript">
	  //vue的数据绑定在data属性上，data本身也是一个对象
	  //方法的定义在：methods属性上，通过json格式来表示
		var app = new Vue({
			el : "#app",
			data : {
				message : "我是一个很单纯的p",
				user : {
					name : "隔壁老文",
					age : 17,
					color : "pink"
				}
			},
			methods:{
				say:function(){
					//this指向当前对象，当前app对象
					return "hello:"+this.user.name+"!";
				},
				swim:function(){
					console.debug("小狗的游泳姿势，还不错。。。");
				}
			}
		});
	  //方法调用①：通过Vue对象实例调用方法
	  app.swim();
	</script>

5.vue数据双向绑定体验

<div id="app">
		<!--监听input中值的改变同步到data中的message上:
		v-model:数据的绑定；
		将app对象中的message值绑定到input中，同时输入input值后，也作用于app的message值。
		-->
		<input type="text" v-model="message" />
		<!-- 显示app对象的message的值 -->
		<h1>{{message}}</h1>
	</div>
	<!-- 引入vue文件 -->
	<script type="text/javascript" src="js/vue/vue.min.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el : "#app",
			data : {
				message : "我是一个很单纯的p",
 				}
		});
	</script>

显示效果：在这里插入图片描述

二.VueJS表达式

1.表达式语法

VueJS表达式写在双大括号内：{{ expression }}。
VueJS表达式把数据绑定到 HTML。
VueJS将在表达式书写的位置"输出"数据。
VueJS表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。

2.简单表达式

在{{ }}中可以进行简单的运算.

<div id="app">
        <!--简单表达式  -->
        <h1>{{5+5}}</h1>
        <!-- +:运算，字符串连接 -->
        <h1>{{5+"v5"}}</h1>
        <h1>{{5+"5"}}</h1>
        <!-- -：减法 -->
        <h1>{{"5"-"5"}}</h1>
<!-- *:乘 -->
        <h1>{{5*5}}</h1>
    
        <h1>{{"5"*"5"}}</h1>   你在做* / - %  字符串它会自动转为数字
        <!-- / 除-->
        <h1>{{5/5}}</h1>
        <h1>{{5/5}}</h1>
     </div>

	<!-- 引入vue文件 -->
	<script type="text/javascript" src="js/vue/vue.min.js"></script>
	<script type="text/javascript">
	  var app = new Vue({
		  //挂载到id=app元素上
		  el:"#app"
		 
	  });
	</script>

3.三目操作

1 在{{}}中的表达式可以使用data中数据
2. 在{{}}中的表达式可以使用三元运算符,但是不能够使用其他语句

<div id="app">
		<!--三目运算  -->
		{{ show1?"真":"假"}}
	</div>
	<script type="text/javascript" src="js/vue/vue.min.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el : "#app",
			data : {
				show1 : true
			}
		});
	</script>

三.Vue指令

1.什么是指令

指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.

2.常见的指令

v-text=“表达式” 设置标签中的文本
v-html=“表达式” 设置标签中的html
v-if=“表达式” 判断条件
v-for=“表达式” 循环
v-model=“表达式” 数据双向绑定
v-on=“表达式” 注册事件

3.指令作用

1.作用: 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
2.一个标签元素上可以出现多个指令属性
3.指令只能够出现在Vue对象所挂载的标签范围内的标签中

4.v-text指令

语法:
<标签名 v-text=“表达式”></标签名>

v-text的作用
通过data中的数据更新标签标签中的textContent属性的值.(标签中的文本内容)

注意事项:
4.1 如果值是html的值,也不会作为普通的文本使用.
4.2 标签中的属性值必须是data中的一个属性.

<div id="app">
    <span v-text="message"></span><br/>
    <span v-text="user.username"></span><br/>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            message: "<h1>这是一个Span!</h1>",
            user: {
                username: "lw"
            },
        }
    });
</script>

5.v-html指令(重点)

语法:
<标签名 v-html=“表达式”></标签名>

v-html的作用
通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容)

注意事项:
5.1 {{表达式}} 可以插入的标签的内容中
5. 2 v-text和v-html更改标签中的所有内容

<div id="app">
    <div v-html="message"></div>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            message: "<h1>这是HTMl代码</h1>"
        }
    });
</script>

6.6.v-for指令(重点)

1.语法:
1.1 <标签 v-for=“元素 in 数据源”></标签>

数据源: 数组,
元素: 数组中的一个元素,

数据源: 对象
元素: 对象中的一个值

1.2 <标签 v-for="(元素,索引|键) in 数据源"></标签>
当数据源是数组时, ()的第二个参数值索引
当数据源是对象时, ()的第二个参数值键

1.3 <标签 v-for="(元素,键,索引) in 对象"></标签>

2.v-for的作用:
基于数据源多次循环达到多次渲染当前元素.

<div id="app">
    <h1>循环数组</h1>
    <ul>
        <li v-for="hobby in hobbys">{{hobby}}</li>
    </ul>
    <h1>遍历对象</h1>
    <ul>
        <li v-for="value in student">{{value}}</li>
    </ul>

    <h1>带索引循环数组</h1>
    <ul>
        <li v-for="(hobby,index) in hobbys">{{index}}--{{hobby}}</li>
    </ul>
    <h1>带键遍历对象</h1>
    <ul>
        <li v-for="(value,key,index) in student">{{index+1}}---{{key}}--{{value}}</li>
    </ul>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            hobbys : ["爬山","游泳","打豆豆","睡觉"],
            student : {
                name: "小毛",
                age: 29,
                sex: "男",
            },
            num : 10,
            str : "it",
        }
    });
</script>

7.v-for的案例-学生列表(重点)

<div id="app">
    <table >
        <tr>
            <th>序号</th>
            <th>姓名</th>
           <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr v-for="student in students">
            <td>{{student.id}}</td>
            <td>{{student.name}}</td>
            <td>{{student.age}}</td>
            <td>{{student.sex}}</td>
        </tr>
    </table>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
           students: [
               {id:1,name: "刘备", age: 29, sex: "男"},
                {id:2,name: "貂蝉", age: 30, sex: "女"},
                {id:3,name: "吕布", age: 31, sex: "男"}
            ]
       }
    });
</script>

8.v-bind指令(重点)

将data中的数据绑定到标签上,作为标签的属性.

1.语法:
1.1 为一个标签属性绑定一个值
<标签 v-bind:标签属性名字=“表达式”></标签>
简写形式:
<标签 :标签属性名字=“表达式”></标签>
1.2 为一个标签绑定一个对象作为该标签的多个属性
<标签 v-bind=“对象”></标签>

注意事项
将一个对象键和值作为标签的属性的名字和值时, 在v-bind后不需要指定属性的名字

<div id="app">
    <img v-bind:src="imgsrc" v-bind:title = "title"/>
    <img :src="imgsrc" :title = "title"/>
    <input v-bind="props"/>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            imgsrc: "./img/1.jpg",
            title: "二哈!",
            props :{
                type: "text",
                name: "username",
            }
        }
    });
</script>

9.v-model 指令(重点)

1.语法:
<标签 v-model=“表达式”></标签>
2 . 在表单控件上创建双向绑定
2.1 表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,
2.2 当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变.
3. 注意事项:
3.1 如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定.
3.2 绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中
3.3 v-model只作用于以下表单:
input select textarea

<div id="app">
  <h1>绑定到type=text的input表单元素</h1>
  姓名:<input type="text" v-model="inputValue"><br/>
  data中的值:{{inputValue}}

  <h1>绑定到type=checkbox的input表单元素</h1>
  打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
  踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
  data中的值:{{checkboxValue}}


  <h1>绑定到type=radio的input表单元素</h1>
  打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
  踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
  data中的值:{{radioValue}}

  <h1>绑定到textarea的元素</h1>
  个人简介:<textarea v-model="textareaValue"></textarea><br/>
  data中的值:{{textareaValue}}


  <h1>绑定到单选的select的元素</h1>
  技能:<select v-model="skills">
        <option value="java">java</option>
        <option value="php">php</option>
        <option value=".net">.net</option>
      </select><br/>
  data中的值:{{skills}}

</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            inputValue: "初始化的值",
            checkboxValue: ["踢足球"],
            radioValue: "打篮球",
            textareaValue: "你是一个优秀的软件工程师!",
            skills: "java",
        }
    });
</script>

10.v-show指令

1.语法:
<标签名 v-show=“表达式”></标签名>

2 v-show的作用
根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
当v-show的值为真时, 会在标签的css中添加 display: none :

3 注意事项:
3.1 当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除
3.2 标签的值会自动转换为boolean类型的值

<div id="app">
    <div v-show="show">你看到我了!</div>
    <div v-show="hidden">你看不到我了!</div>
    <div v-show="score>=90">优秀</div>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            "show":true,
            "hidden":true,
            "score":90,
        }
    });
</script>

11.v-if指令

1.语法:
<标签名 v-if=“表达式”></标签名>

2.v-if的作用
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

3.注意事项:
3.1 当表达式中的值是false时, 是从页面上删除.
3.2 标签的值会自动转换为boolean类型的值

<div id="app">
    <div v-if="show">你看到我了!</div>
    <div v-if="hidden">你看不到我了!</div>
    <div v-if="score>=90">优秀</div></div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            "show":true,
            "hidden":true,
            "score":90,
        }
    });
</script>

12.v-else指令

1.语法:
<标签名 v-if=“表达式”></标签名>
<标签名 v-else></标签名>

2.v-else的作用
当v-if表达式不成立时, v-else执行.

3.注意事项:
3.1 该指令必须也v-if搭配起来使用.
3.2 v-else是一个单独的属性, 该属性是不要赋值的.

<div id="app">
    <div v-if="isVip">欢迎欢迎!!</div>
    <div v-else>滚动!!</div>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            isVip: true
        }
    });
</script>

13.v-else-if指令

1.语法:

<标签名 v-if=“表达式”></标签名>
<标签名 v-else-if=“表达式”></标签名>
<标签名 v-else-if=“表达式”></标签名>
<标签名 v-else></标签名>

<div id="app">
    <div v-if="score>=90">优秀!!</div>
    <div v-else-if="score>=70">良好!!</div>
    <div v-else-if="score>=60">及格!!</div>
    <div v-else="score<60">不及格!!</div>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            score: 80
        }
    });
</script>

14.v-on事件绑定

1 语法:
1.1 使用v-on指令注册事件
<标签 v-on:事件句柄=“表达式或者事件处理函数”></标签>
1.2 简写方式
<标签 @事件句柄=“表达式或者事件处理函数”></标签>

<div id="app">
  <!--a:直接写表达式-->
<button v-on:click="age++">{{age}}</button>
<!--b:绑定一个指定的方法：没有参数：可以直接调用，不写();也可以写()-->
<button v-on:click="say">说</button>
<button @click="say()">说~</button>
<!--c:传参-->
<button v-on:click="add(1)">{{age}}</button>

</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
   var app = new Vue({
    el: "#app",
    data: {
        name:"老文",
        age:17
    },
    methods:{
        say:function(){
            console.debug(69);
        },
        add:function(num){
            //this:当前对象
            this.age=this.age+num;
            return this.age;
        }
    }
});

</script>