vue 入门 vue的安装常用指令表达式

最新推荐文章于 2024-01-23 21:55:23 发布

会摄影的程序员

最新推荐文章于 2024-01-23 21:55:23 发布

阅读量173

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_42998796/article/details/103768250

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue是的介绍

是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue渐进式的理解
Vue只关注视图层。
Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。
Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue学习起来非常简单。
官网：[https://cn.vuejs.org/]

特性

 轻量
Vue.js库的体积非常小的，并且不依赖其他基础库。
 数据绑定
对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
 指令
内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。
 插件化
Vue.js核心不包含Router(路由)、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
 组件化 --component (重复利用)
组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

Vue的hello

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                msg:'xxxx'
            }
        })
    </script>
</body>
</html>

这就是一个简单的例子，下面我们将来详细的介绍Vue中的细节问题，常用的指令

Vue实例对象的详解

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

<div id="app">
	<h1>{{message}}</h1>
</div>
<div class="vueClz">
	<h1>{{message}}</h1>
</div>

/* 
使用构造函数创建一个vue对象：
这个对象作用与哪一个html标签，是通过el属性来挂载的，常用的有id和class挂载方式：
id挂载:el:"#id"
class挂载：el:".class"
 */
//id挂载方式：
var app = new Vue({
	el : "#app",
	data : {
		message : "我是id挂载方式"
	}
});
//class挂载方式：
var app2 = new Vue({
	el : ".vueClz",
	data : {
		message : "我是class挂载方式"
	}
});

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

<div id="app">
	<h1>{{message}}</h1>
	<h1>
		{{user.name}},今年才:{{user.age}}岁.{{user.color}}<font color="pink">是一个很美丽的颜色</font></br>
	</h1>
</div>s

//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="老刘";

3、 Vue中的方法(methods)详解
Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体
方法都是被Vue对象调用,所以方法中的this代表Vue对象

<div id="app">
	方法的调用直接在html模板标签中调用：
	{{say()}}
</div>

//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();

Vue的架构模式

**MV VM模式：**

 Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。

 View：它专注于界面的显示和渲染，在Vue中则是包含一堆声明式Directive和Component的视图模板。

 ViewModel：它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在vue中“Vue对象实例”充当了这个ViewModel的角色；
图解：
在这里插入图片描述

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>


var app = new Vue({
  //挂载到id=app元素上
  el:"#app"
 
});

3、三目操作符
 在{{}}中的表达式可以使用data中数据
 在{{}}中的表达式可以使用三元运算符,但是不能够使用其他语句

<div id="app">
	<!--三目运算  -->
	{{ show1?"真":"假"}}
</div>

var app = new Vue({
	el : "#app",
	data : {
		show1 : true
	}
});

4、字符串操作
 直接使用字符串字面值作为字符串对象
 使用data中的字符串对象

<div id="app">
    {{"这是字面值"}}<br/>
    {{"这是字面值".length}}<br/>
    {{message.length}}<br/>
    {{message.substring(1,5)}}<br/>
    {{message.substring(2,6).toUpperCase()}}<br/>
</div>


var app = new Vue({
	el: "#app",
	data: {
		message: "这是data中的数据"
	}
});

5、对象操作
在表达式中可以使用data中定义的对象的各种用法.像使用js对象中的方法和属性一样

<div id="app">
    {{user}}<br/>
    {{JSON.stringify(user)}}<br/>
    {{user.toString()}}<br/>
    {{user.name}}<br/>
    {{user.age}}<br/>
    {{user.getAge()}}<br/>
</div>

var user = {
	name: "张三",
	age: 29,
	getAge: function () {
		return this.age
	},
	toString:function(){
		return "姓名:"+this.name+",年龄:"+this.age;
	}
};
var app = new Vue({
	el: "#app",
	data: {
		user: user
	}
});

6、数组操作
在表达式中可以使用JavaScript数组中的任何语法来操作数组.

<div id="app">
    {{hobbys}}<br/>
    {{hobbys[0]}}<br/>
    {{hobbys.length}}<br/>
    {{hobbys.toString()}}<br/>
    {{hobbys.join("------")}}<br/>
</div>

var app = new Vue({
	el: "#app",
	data: {
		hobbys:["打游戏","踢足球",'泡MM',"泡GG"]
	}
});

Vue的常用指令

1、什么是指令
指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.
2、常见的指令
 v-model=“表达式” 数据双向绑定
 v-text=“表达式” 设置标签中的文本
 v-html=“表达式” 设置标签中的html
 v-if(else else if)=“表达式” 判断条件
 v-for=“表达式” 循环
 v-on=“表达式” 注册事件

3、指令作用
 作用: 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
 一个标签元素上可以出现多个指令属性
 指令只能够出现在Vue对象所挂载的标签范围内的标签中
4、 v-text指令
语法:
<标签名 v-text=“表达式”></标签名>

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

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

<div id="app">
    <span v-text="message"></span><br/>
    <span v-text="user.username"></span><br/>
</div>

var app = new Vue({
	el: "#app",
	data: {
		message: "<h1>这是一个Span!</h1>",
		user: {
			username: "lw"
		},
	}
});

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

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

注意事项:
如果值是html的值,不会作为普通的文本使用,要识别html标签。
{{表达式}} 可以插入的标签的内容中
v-text和v-html更改标签中的所有内容

<div id="app">
    <div v-html="message"></div>
</div>

var app = new Vue({
	el: "#app",
	data: {
		message: "<h1>这是HTMl代码</h1>"
	}
});

6、 v-for指令
语法:
<标签 v-for=“元素 in 数据源”></标签>

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

数据源: 对象
元素: 对象中的一个属性名

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

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

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

<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>

var app = new Vue({
	el: "#app",
	data: {
		hobbys : ["爬山","游泳","打豆豆","睡觉"],
		student : {
			name: "小毛",
			age: 29,
			sex: "男",
		},
		num : 10,
		str : "itsource",
	}
});

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>

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: "男"}
		]
	}
});

8、 v-bind指令
将data中的数据绑定到标签上,作为标签的属性.

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

var app = new Vue({
	el: "#app",
	data: {
		imgsrc: "./img/1.jpg",
		title: "二哈!",
		props :{
			type: "text",
			name: "username",
		}
	}
});

9、 v-model 指令
语法:
<标签 v-model=“表达式”></标签>

在表单控件上创建双向绑定
表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,
当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定
注意事项:
 如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定.
 绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中-回显
 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>

var app = new Vue({
	el: "#app",
	data: {
		inputValue: "初始化的值",
		checkboxValue: ["踢足球"],
		radioValue: "打篮球",
		textareaValue: "你是一个优秀的软件工程师!",
		skills: "java",
	}
});

10、 v-show指令
语法:
<标签名 v-show=“表达式”></标签名>

作用:
根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
当v-show的值为假时, 会在标签的css中添加 display: none :
注意事项:
 当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除
 标签的值会自动转换为boolean类型的值

<div id="app">
    <div v-show="show">你看到我了!</div>
    <div v-show="hidden">你看不到我了!</div>
    <div v-show="score>=90">优秀</div>
</div>

var app = new Vue({
	el: "#app",
	data: {
		"show":true,
		"hidden":true,
		"score":90,
	}
});

11、 v-if指令
语法:
<标签名 v-if=“表达式”></标签名>

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

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

<div id="app">
    <div v-if="show">你看到我了!</div>
    <div v-if="hidden">你看不到我了!</div>
    <div v-if="score>=90">优秀</div>
</div>

var app = new Vue({
	el: "#app",
	data: {
		"show":true,
		"hidden":true,
		"score":90,
	}
});

12、 v-else指令
语法:
<标签名 v-if=“表达式”></标签名>
<标签名 v-else></标签名>

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

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

<div id="app">
    <div v-if="isVip">欢迎欢迎!!</div>
    <div v-else>滚动!!</div>
</div>

var app = new Vue({
	el: "#app",
	data: {
		isVip: true
	}
});

13、 v-else-if指令
语法:
<标签名 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>

var app = new Vue({
	el: "#app",
	data: {
		score: 80
	}
});

总结

这就是Vue的入门知识点，有好多都是新的写法，所以需要慢慢接受，我将在下一篇博客讲解Vue的进阶使用！

会摄影的程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 入门 vue的安装常用指令表达式

Vue是的介绍是什么Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue渐进式的理解Vue只关注视图层。Vue通...
复制链接

扫一扫