Vue 实例成员
Vue
一. 什么是Vue
可以独立完成前后端分离时 Web项目的JavaScript框架
二.为什么学Vue
前端三大主流框架：Angular React Vue
Vue结合了其他框架优点、轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件化开发、单页面应用
# vue是js渐进式框架
# 根据开发需求，可以决定vue框架控制项目的具体方位：可以为一个标签，也可以为一个页面，甚至可以为整个项目
三.如何使用Vue
开发版本：vue.js
生产版本：vue.min.js
vue的导入:
<!--方式一: 本地-->
<script src="js/vue.js"></script>
<!--方式二: cdn-->
<script src="https://cn.vuejs.org/js/vue.min.js"></script>
插值表达式:
<div id="app">
<!-- {{ }} 是插值表达式,中间的info是变量,可通过vue实例成员data赋值 -->
<!-- 注意:插值表达式中可以写基础类型的数据,只有写变量时才能被data赋值 -->
{{ info }}
{{ 'info' }} 渲染到页面是: info
</div>
<1>Vue实例:
<script>
new Vue({
// 实例成员
})
</script>
<!--
实例与页面挂载点(标签)一一对应
一个页面中可以出现多个实例对应多个挂载点
实例只操作挂载点内部内容
-->
<2>实例成员:
- 挂载点 | el
使vue与html页面结构建立关联 <body>
<div id="app">
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app' // 挂载点
})
</script>
注意:
# 1) html标签与body标签不能作为挂载点
# 2) 一个vue对象挂载点之后索引一个匹配结果，所以挂载点一般用id标识
- 数据 | data
<!--
1) data为vue环境(被挂载的标签内部)提供数据，采用字典{变量名:值}形式
2) 在插值表达式{{}}中，直接书写数据的key(变量名)来访问数据(值)
3) 在外部通过接收实例的变量app，访问实例成员(实例成员都用$开头)，间接访问到数据
app.$data.info
4) 在外部也可以通过实例变量app直接访问数据
app.info
5) 在vue实例内部的方法methods中，使用变量，this.info (this其实就是等价于app)
-->
<body>
<div id="app">
{{ info }}
{{ 'info' }}
<p>{{ num }}</p>
<p>{{ result }}</p>
<p>{{ arr }}</p>
<p>{{ dic }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
info: 'message',
num:100,
result: true,
arr: [1, 2, 3, 4, 5],
dic: {
name: 'xionger',
age: 20
}
}
})
</script>
<script>
console.log(app); // vue对象
console.log(app.$data.info); // message
console.log(app.info); // message
</script>
- 过滤器 | filters
<!--
1) 过滤器本身就是处理数据的函数，可以将插值表达式中的数据作为参数传入过滤器函数进行处理，得到的函数返回值就是处理后的结果
2) 过滤器使用语法 {{ ...变量 | 过滤器(...变量) }}
3) 过滤器在实例中用filters成员提供
4) 参数多传不处理,少传返回NaN
-->
<body>
<div id="app">
<!-- 插值表达式可以直接做简单的运算 -->
<p>{{ num + 3.5 }}</p>
<!--<p>{{ msg.split('')[5] }}</p>-->
<p>{{ num | f1 }}</p>
<p>{{ 10, 20 | f2(50, 80) }}</p>
<p>{{ 10, 20,30 | f2(50, 80) }}</p>
<p>{{ 10 | f2(50, 80) }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
num: 100,
},
filters:{
f1:function (num) {
return num*2
},
f2:function (a,b,c,d) {
return a+b+c+d
}
}
})
</script>
- 方法 | methods
<!--
methods为事件提供实现体(函数)
与事件指令配合使用
-->
<style>
.box { background-color: orange }
</style>
<div id='app'>
<p class="box" v-on:click="pClick">测试</p>
<p class="box" v-on:mouseover="pOver">测试</p>
</div>
<script>
var app = new Vue({
el: '#app',
methods: {
pClick () {
// 点击测试
},
pOver () {
// 悬浮测试
}
}
})
</script>
<!-- v-on:为事件绑定的指令 -->
<!-- methods为事件提供实现体-->
- js对象(即字典)补充
let b = 20;
let dic = {
a: 10, // 字典本身就是对象，key都是字符串形式可以省略引号
b // 值为变量时，且与key同名，可以简写
};
console.log(dic)
- 插值表达式转义 | delimters
<!--
防止django的模板渲染语法与插值表达式冲突,前端通常会转义插值表达式的{{ }}
-->
<div id="app">
{{ msg }}
{[ msg ]}
</div>
<script>
new Vue({
el: '#app',
data: {
msg: '12345'
},
// delimiters: ['{{', '}}'],
delimiters: ['{[', ']}'],
})
</script>
- 计算属性 | computed
一个变量的值依赖多个变量(多变一)，且依赖的任意一个变量发生改变，该变量都会改变
<!--
1) computed是用来声明 方法属性(伪装成变量的方法) 的
2) 声明的方法属性不能在data中出现
3) 方法属性必须在页面中渲染使用，才会对该方法内部出现的所有变量进行监听
4) 计算属性的值来源于监听方法的返回值
-->
<div id="app">
姓：<input type="text" v-model="fName">
名：<input type="text" v-model="lName">
姓名：<b>{{ flName }}</b>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
fName: '',
lName: '',
},
computed: {
// flName 要在页面渲染
flName(){
// this.fName和this.lName是被监听的变量
// 变量flName的值由函数的返回值决定
return this.fName + this.lName;
}
}
})
</script>
- 监听属性 | watch
多个变量的值依赖一个变量(一变多)，该变量发生改变，所有依赖变量都会改变
<!--
1) watch是用来声明 方法属性 的
2) watch为data中已存在的属性设置监听事件
3) 监听的属性值发生改变，就会触发监听事件
4) 监听事件的方法返回值没有任何意义
-->
<body>
<div id="app">
姓名：<input type="text" v-model="fullName">
姓：<b>{{ firstName }}</b>
名：<b>{{ lastName }}</b>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
fullName:'',
firstName:'',
lastName:'',
},
watch:{
fullName(){
// 从data中拿到fullname进行操作
namearr = this.fullName.split('');
// 给data中的firstname和lastName赋值,渲染到插值表达式中
this.firstName = namearr[0];
this.lastName = namearr[1];
// return 的值没有任何意义
}
}
})
</script>
Vue 实例成员的更多相关文章
- 03 Vue实例成员
Vue实例 1.el:实例 new Vue({ el: '#app' }) // 实例与页面挂载点一一对应 // 一个页面中可以出现多个实例对应多个挂载点 // 实例只操作挂载点内部内容 2.data ...
- （day65、66）Vue基础、指令、实例成员、JS函数this补充、冒泡排序
目录 一.Vue基础 (一)什么是Vue (二)为什么学习Vue (三)如何使用Vue 二.Vue指令 (一)文本指令 (二)事件指令v-on (三)属性指令v-bind (四)表单指令v-model ...
- 第一章、VUE-挂载点-实例成员-数据-过滤器-文本指令-事件指令-属性指令-表单指令-01
目录 路飞项目 vue vue 导读 vue 的优势 渐进式框架 引入 vue 实例成员 - 挂载点 el js 对象(字典)补充 实例成员 - 数据 data 实例成员 - 过滤器 filters ...
- VUE-挂载点-实例成员-数据-过滤器-文本指令-事件指令-属性指令-表单指令-01
目录 路飞项目 vue vue 导读 vue 的优势 渐进式框架 引入 vue 实例成员 - 挂载点 el js 对象(字典)补充 实例成员 - 数据 data 实例成员 - 过滤器 filters ...
- vue指令,实例成员,父子组件传参
v-once指令 """ v-once:单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) """ <di ...
- Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)
Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...
- Vue框架（二）——Vue指令（v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令）、todolist案例、Vue实例（计算、监听）、组件、组件数据交互
Vue指令 1.v-once指令 单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...
- 前端（二十）—— vue介绍：引用vue、vue实例、实例生命周期钩子
vue 一.认识Vue 定义:一个构建数据驱动的 web 界面的渐进式框架 优点: 1.可以完全通过客户端浏览器渲染页面,服务器端只提供数据 2.方便构建单页面应用程序(SPA) 3.数据驱动 =&g ...
- Vue - 实例
1.实例属性介绍如下图所示: 具体介绍如下: A.$parent:访问当前组件的父实例 B.$root:访问当前组件的根实例,要是没有的话,则是自己本身 C.$children:访问当前组件实例的直接 ...
随机推荐
- XShell上传、下载本地文件到linux服务器
Python之道发表于程序员八阿哥订阅 1.2K 腾讯云服务器 年付3折起 首次购买云服务器 最低3折起 超高性价比 限时抢购 Xshell很好用,然后有时候想在windows和linux上传或下载某 ...
- P-R曲线深入理解
P-R曲线就是精确率precision vs 召回率recall 曲线,以recall作为横坐标轴,precision作为纵坐标轴.首先解释一下精确率和召回率. 解释精确率和召回率之前,先来看下混淆矩 ...
- Python开发【源码剖析】 List对象
前言 本文探讨的Python版本为2.7.16,可从官网上下载,把压缩包Python-2.7.16.tgz解压到本地即可 需要基本C语言的知识(要看的懂) PyListObject对象 PyListO ...
- 单例DCL模式
单例模式可以保证系统中一个类只有一个实例.即一个类只有一个对象实例. 一般写法 public class DCLSingle { public static DCLSingle instance= n ...
- 3.NioEventLoop的启动和执行
NioEventLoop启动和执行 NioEventLoop启动 在服务端启动的代码中,我们看到netty在注册和绑定时,判断了当前线程是否是NioEventLoop线程.如果不是, 则将这些操作包装 ...
- tomcat配置外部静态资源映射路径(windows和Linux部署)
如果你不想用ngnix配置的话,只单独使用tomcat的话可以看看这篇文章,接下来开始 使用场景 1.单机开发有时侯如果放在war下每次clean都会清理当前项目下静态文件特别折腾. 2.只有启动to ...
- VisualStudio 连接 MySql 实现增删查改
首先创建数据库,建立一个用户登录表 2.visualStudio默认是不支持MySql的,要想通过Ado.Net 操作MySql 需要在管理NeGet包添加对MySql.Data 和 MySql.D ...
- VS2017 Git failed with a fatal error. error: open(".vs/xxxxxx/v15/Server/sqlite3/db.lock"): Permission denied fatal: Unable to process path .vs/xxxxxx/v15/Server/sqlite3/db.lock
具体错误信息:Git failed with a fatal error. error: open(".vs/xxxxxx/v15/Server/sqlite3/db.lock") ...
- mysql 存储过程、视图---创建、调用、删除
之前一直用的是Sql Server数据库,最近偶然机会接触到mysql.这里总结了关于mysql 存储过程.视图的“创建.调用.删除”示例 ============================== ...
- mtd交叉编译mkfs命令
下载 mtd:ftp://ftp.infradead.org/pub/mtd-utils/ zlib:http://www.zlib.net/ lzo:http://bouchez.info/lzo. ...