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

3.1、使用方式

直接在html模板标签中调用
3.1.2、通过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();

4、Vue.JS表达式

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

4.1 简单表达式

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

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

4.2 三目运算符

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

<div id="app"><!--三目运算  -->{{ show1?"真":"假"}}
</div>var app = new Vue({el : "#app",data : {show1 : true}
});

4.3 字符串操作

直接使用字符串字面值作为字符串对象
使用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中的数据"}
});

4.4 对象操作

在表达式中可以使用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}
});

4.5 数组操作

在表达式中可以使用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"]}
});

5 Vue指令

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

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

5.2 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>"}
});

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

5.4 v-bind

语法:
为一个标签属性绑定一个值
<标签 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",}}
});

5.5 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",}
});

5.6 v-show

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

<body>
<div id="div1"><span v-show="boolean1">快拉上了卡萨卡111</span><br><span v-show="boolean2">快拉上了卡萨卡222</span><br><span v-show="boolean3>50">快拉上了卡萨卡333</span><br></div>
</body>
<script>var vue1 = new Vue({el: "#div1",data: {boolean1: true,boolean2: false,boolean3: 80,}})
</script>

5.7 v-if/v-else-if/v-else

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

<div id="div1"><div v-if="boolean3<60 ">不及格</div><div v-else-if="boolean3>60 & boolean3<90">及格</div><div v-else="boolean3>90">优秀</div><br></div>
</body>
<script>var vue1 = new Vue({el: "#div1",data: {boolean1: true,boolean2: false,boolean3: 40,}})
</script>

VUE基础、表达式和指令相关推荐

Vue基础—模版语法指令精细版
本资源由 itjc8.com 收集 day01 Vue 是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架 vue 的核心库只关注视图层,不仅易于上手,还便 ...
vue基础4——自定义指令
自定义指令自定义指令中的this指向window <div id="root"><h2>当前的n值是:<span v-text="n&qu ...
Vue知识（一）Vue基础语法
Vue知识一.邂逅Vue.js 1.认识Vue.js 2.Vue.js安装方式 3.Vue初体验 4.Vue的MVVM框架二.Vue基础语法 v-if指令 v-show指令 v-else指令 v- ...
vue基础1--脚手架的使用与vue基础指令
脚手架的使用与vue基础指令安装 vue-devtools 安装vscode插件 1. Vue基本概念 1.1 Vue是什么 1.2 Vue学习的方式 2. @vue/cli脚手架 2.1 @vue ...
Vue 基础之常用内置指令
Vue 基础之常用内置指令描述指令内容渲染指令 {{}} 与 v-text 覆盖面积 v-text {{}} 闪现问题 {{}} v-text v-html 属性绑定指令 v-bind 简写 : ...
Vue基础-vue指令
一.vue基础-插值表达式 1.思考 1.以前改变标签内容,如何做? 2.用 Vue 有没有更简单的方式? 2.目的在dom标签中, 直接插入内容 3.语法又叫: 声明式渲染/文本插值语法: { ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch...
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
Vue—基础概念—指令
原文地址:Vue指令 5.指令什么是指令? 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的预期值是:单个 JavaScript 表达式.指令的职责是,当表达式的值改变时,将 ...