Vue框架简介及简单使用
Vue框架学习--Part1
一、前端框架介绍
前台框架：angular(facebook)、react(github)、vue(尤雨溪)
vue从前两大框架中衍生而来。
目前react和vue应用的比较多。
二、vue框架简介
vue特点：有前两大框架优点，摈弃缺点；但没有前两个框架健全
vue优点：中文API、单页面应用、组件化开发、数据双向绑定、虚拟DOM、
数据驱动思想(相比DOM驱动)
三、vue使用初体验
1. vue如何在页面中引入
- 通过script标签引入vue.js环境。
- 创建vue实例。
- 通过el进行挂载（直接将标签名与el对应即可挂载，该标签即为挂载点）。
- 为了与div进行区分，选择用section作为根块级标签，它跟div的作用是一样的，就是名字不一样。
<body>
<section>
<div id="d1">
{{ msg }} 这里的msg为一个变量值，通过vue给其传值
<p v-on:click="pClick" v-bind:style="pStyle">
{{ info }}
</p>
</div>
<hr>
<div class="d2">
{{}} 不加空格就不会被vue识别，会直接在浏览器中渲染出来
</div>
<hr>
<div class="d2">
{{ }}
</div>
</section>
</body>
<script src="js/vue.js"></script> 加载vue框架
<script>
let app = new Vue({
el: 'section',
data: { // data为挂载点内部提供数据
msg: 'message',
info: '信息',
pStyle: {
color: 'yellowgreen'
}
},
methods: {
pClick: function () {
if (app.pStyle.color !== 'yellowgreen') {
app.pStyle.color = 'yellowgreen'
} else {
app.pStyle.color = 'red'
}
console.log(app.msg);
console.log(app.pClick);
console.log(this.msg);
console.log(this.pClick);
}
}
});
// 实例外部需要访问实例内部的属性，需要将实例用一个变量接收
console.log(app.msg)
</script>
注意：
- 通常挂载点都采用id选择器（挂载点采用的是css3选择器语法，但是只能匹配第一次检索到的结果，因此使用具有唯一性的id作为选择器）。
- html与body标签不能作为挂载点。
- 挂载点采用的是css3选择器语法，但是只能匹配第一次检索到的结果。
声明的实例是否用一个变量接收
- 在实例内部不需要，用this就代表当前vue实例本身。
- 在实例外部或其他实例内部需要，定义一个变量接收new Vue()产生的实例
2. 插值表达式
插值表达式由{}组成，其内部可以放入变量且可以进行一些简单的运算或操作。
<div id="app">
<p>{{ msg }}</p>
<p>{{ num * 10 }}</p>
<p>{{ msg + num }}</p>
<p>{{ msg[1] }}</p>
<p>{{ msg.split('') }}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '信息',
num: 10
}
})
</script>
# 实际页面：
信息
100
信息10
息
[ "信", "息" ]
3. 文本指令
1. {{ }}
2. v-text：不能解析html语法的文本，会原样输出
3. v-html：能解析html语法的文本
4. v-once：处理的标签的内容只能被解析一次
-----------------------------------------------
<body>
<div id="app">
<p>{{ msg.split('') }}</p>
<p v-text="msg.split('')">12345</p>
<p v-text="info"></p>
<p v-html="info"></p>
<hr>
<p v-on:click="pClick" v-once>{{ msg + info }}</p>
<p>{{ msg }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'message',
info: '<i>info</i>'
},
methods: {
pClick: function () {
this.msg = '信息'
}
}
})
</script>
4. 方法指令(事件指令)
事件指令： v-on:事件名="方法变量"
简写： @事件名="方法变量"
事件加括号就是告诉系统我要自己传参，不加括号自动传事件对象。
<body>
<div id="app">
<p v-on:click="f1">{{ msg }}</p>
<p @click="f1">{{ msg }}</p>
<hr>
<!--mouseover对应mouseenter | mouseout对应mouseleave-->
<p @mouseover="f2" @mouseout="f3" @mouseup="f5" @mousemove="f6" @contextmenu="f7">{{ action }}</p>
<hr>
<!-- 事件变量，不添加()，默认会传事件对象: $event -->
<!-- 事件变量，添加()，代表要自定义传参，系统不再传入事件对象，但是可以手动传入事件对象 -->
<p @click="f8($event, '第一个')">{{ info }}</p>
<p @click="f8($event, '第二个')">{{ info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '点击切换',
action: '鼠标事件',
info: '确定点击者'
},
methods: {
f1 () {
this.msg = '点击了'
},
f2 () {
this.action = '悬浮';
console.log('悬浮')
},
f3 () {
this.action = '离开'
},
f4 () {
this.action = '按下'
},
f5 () {
this.action = '抬起'
},
f6 () {
this.action = '移动';
console.log('移动')
},
f7 () {
this.action = '右键';
},
f8 (ev, argv) {
console.log(ev, argv);
this.info = argv + '点击了';
}
}
})
</script>
5. 属性指令
属性指令： v-bind:属性名="变量"
简写： :属性名="变量"
<head>
<meta charset="UTF-8">
<title></title>
<style>
.d1 {
width: 200px;
height: 200px;
background-color: orange;
}
.d2 {
border-radius: 50%;
}
.d3 {
border-radius: 20%;
}
</style>
</head>
<body>
<div id="app">
<!--属性指令： v-bind:属性名="变量"
简写： :属性名="变量"
-->
<p style="color: red" class="dd1" abc="def" title="悬浮提示">红色字体</p>
<!--1、简单使用-->
<p v-bind:title="pTitle" :abc="def" @click="changeImg">简单使用</p>
<!--<img :src="img_src" alt="">-->
<!--2、class属性绑定-->
<!--c1变量的值就是类名-->
<p :class="c1"></p>
<!--多类名可以用[]语法，采用多个变量来控制-->
<p :class="[c2, c3]"></p>
<!--选择器位可以设置为变量，也可以设置为常量-->
<p :class="['d1', c4]"></p>
<!--{类名: 布尔值}控制某类名是否起作用-->
<!--<p :class="{x1: false}"></p>-->
<!--多种语法混用-->
<p :class="['d1', {d2: is_true}]" @click="is_true = !is_true"></p>
<!--3、style属性绑定(了解)-->
<p :style="myStyle">样式属性</p>
<p :style="{width: w,height: h, backgroundColor: bgc}">样式属性</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
pTitle: '简单使用',
def: '自定义属性',
img_src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3819296004,574391848&fm=26&gp=0.jpg',
c1: 'd1 d2',
c2: 'd1',
c3: 'd3',
c4: 'd3',
is_true: true,
myStyle: {
width: '100px',
height: '100px',
backgroundColor: 'red'
},
w: '200px',
h: '100px',
bgc: 'green'
},
methods: {
changeImg() {
this.img_src = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1371195756,4187769521&fm=26&gp=0.jpg'
}
}
})
</script>
四、js数据类型补充
1.js数据类型
js中数据类型主要有：undefiend、null、string、number、boolean、object(Array)、function等。
js用来声明数据变量的关键字有：var、let、const、不写 这四种。
其中：
let不是用来替换var的；
let、const定义的变量不能重新定义；
且let只能作用于块级作用域(大括号内就是块级作用域)；
不加声明词定义全局变量。
function f() {
d = 40; // 全局变量
}
f(); // 必须运行函数才会执行里面的代码
console.log(d);
// 40
const c = 30; // 常量
console.log(c);
// 30
if (1) {
// 大括号里面属于块级作用域
var a = 10;
let b = 20; // let、const定义的变量不能重复定义，且作用于块级作用域
console.log(b);
// 20
}
console.log(a); // 10
console.log(b); // not defind
for (var i = 0; i < 5; i++) {
console.log(i);
}
// 0、1、2、3、4
console.log(i); // 5
for (let i = 0; i < 5; i++) {
console.log(i);
}
// 0、1、2、3、4
console.log(i); // 5
2. js函数
箭头函数和普通函数有本质区别：
箭头函数没有函数体，只有结果，可以不写大括号和return。
而且箭头函数没有原型，内部调用this会被父级变量的this捕获。
// js定义函数有三种方法
// 第一种
function f1() {
console.log('f1 run');
}
// 第二种
let f2 = function () {
console.log('f2 run');
};
f2();
// 第三种
let f3 = () => {
console.log('f3 run');
};
f3();
箭头函数的定义可以简写：
// 如果箭头函数没有函数体，只有返回值，可以不写{}
let f4 = (n1, n2) => n1 + n2;
let res = f4(10, 25);
console.log(res);
// 如果箭头函数参数列表只有一个，可以不写()
let f5 = num => num * 10;
res = f5(10);
console.log(res);
重点：function、箭头函数、方法都具有本质区别！
类中定义箭头函数，该箭头函数无法访问类实例化对象的this属性。
let obj = {
// 类的属性
name: 'Jerry',
// function普通函数
eat: function (food) {
console.log(this);
console.log(this.name + '在吃' + food)
// {name: "Jerry", eat: ƒ}
// Jerry在吃food
},
// 箭头函数
eat: food => {
console.log(this);
console.log(this.name + '在吃 + food)
// Window {parent: Window, postMessage: ƒ,…}
// 在吃food
// 发现无法访问this
},
// 类的方法
eat(food) { // 方法的语法
console.log(this);
console.log(this.name + '在吃' + food)
// {name: "Jerry", eat: ƒ}
// Jerry在吃food
}
};
obj.eat('food');
Vue框架简介及简单使用的更多相关文章
- Vue框架简介和环境搭建
前言: 此篇随笔为个人学习前端框架Vue,js的技术笔记,主要记录一些自己在学习Vue框架的心得体会和技术总结,作为回顾和笔记使用. 这种写博客的方式,对刚开始学习Vue框架的我,也是一种激励,我相信 ...
- vue框架简介
MVVM框架概述 什么是vue 是一套构建用户界面的渐进式(用到哪一块就用哪一块,不需要全部用上)前端框架,Vue 的核心库只关注视图层 vue的兼容性 Vue.js 不支持 IE8 及其以下版本,因 ...
- vue+vux-ui+axios+mock搭建一个简单vue框架
1.首先感谢同事 2.之前一直在做angularjs的项目,目前vue火热,所以自己搭建了一个的vue框架,在此作为记录 vue+vux-ui这里就不介绍了,有很多博客都写的很详细了. 下面简单记录下 ...
- webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部署
本文为大家讲解的是webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部属,感兴趣的同学参考下 ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端a ...
- 单元测试及框架简介 --junit、jmock、mockito、powermock的简单使用
转 单元测试及框架简介 --junit.jmock.mockito.powermock的简单使用 2013年08月28日 14:33:06 luvinahlc 阅读数:6413 标签: 测试工具单元测 ...
- Vue.js简介
Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然是Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJ ...
- vue学习（一）、Vue.js简介
Vue.js 五天 汤小洋一. Vue.js简介1. Vue.js是什么Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 版本:v1.0 v2.0 是一个构建用户界面的框架 ...
- Vue框架:挂载点-过滤器-事件指令-表单指令
近期学习安排 1.Vue框架 前台html+css+js框架,是不同于js与JQuery的数据驱动框架, 学习的知识点:指令 | 实例成员 | vue项目 2.drf框架 django的插件,完成前 ...
- Spring 系列: Spring 框架简介 -7个部分
Spring 系列: Spring 框架简介 Spring AOP 和 IOC 容器入门 在这由三部分组成的介绍 Spring 框架的系列文章的第一期中,将开始学习如何用 Spring 技术构建轻量级 ...
随机推荐
- Codeforces Round #570 (Div. 3) G. Candy Box (hard version) (贪心,优先队列)
题意:你有\(n\)个礼物,礼物有自己的种类,你想将它们按种类打包送人,但是打包的礼物数量必须不同(数量,与种类无关),同时,有些礼物你想自己留着,\(0\)表示你不想送人,问你在送出的礼物数量最大的 ...
- Poj-3922 A simple stone game（k倍动态减法）
题意: 游戏是这样的:两个玩家以一堆n个石头开始游戏.他们轮流从石堆里取石头,每次至少取一块.先走的人第一步最多可以拿n-1块石头.从那时起,一个玩家最多可以拿k倍于他的对手上次拿的石头.例如,如果一 ...
- 牛客练习赛70 D.数树 (模拟,STL)
题意:每次有\(3\)中操作,对两个点连条边,删去某条边,或者问当前大小不为\(1\)的树的数量.连重边或者删去一条不存在的边,这样的白痴操作可以无视qwq. 题解:水题,用map存一下pair然后分 ...
- Dapr 已在塔架就位 将发射新一代微服务
微服务是云原生架构的核心,通常使用Kubernetes 来按需管理服务扩展. 微软一直走在 Cloud Native Computing Foundation的 最前沿,并通过使用Kubernetes ...
- MySQL——时间、字符串、时间戳相互转换
一.时间转字符串 select data_format(now(),'%Y-%m-%d %H:%i:%s'); 二.时间转时间戳 select unix_timestamp(now()); 三.字符串 ...
- 并发编程之java内存模型（Java Memory Model ，JMM）
一.图例 0.两个概念 Heap(堆):运行时的数据区,由垃圾回收负责,运行时分配内存(所以慢),对象存放在堆上 如果两个线程,同时调用同一个变量,怎两个线程都拥有,该对象的私有拷贝 (可以看一下,T ...
- 大数据开发-从cogroup的实现来看join是宽依赖还是窄依赖
前面一篇文章提到大数据开发-Spark Join原理详解,本文从源码角度来看cogroup 的join实现 1.分析下面的代码 import org.apache.spark.rdd.RDD impo ...
- HDU2837 Calculation（指数循环节）题解
题意: 已知\(f(0)=1,f(n)=(n\%10)^{f(n/10)}\),求\(f(n)\mod m\) 思路: 由扩展欧拉定理可知:当\(b>=m\)时,\(a^b\equiv a^{b ...
- Linux 应用开发----socket编程笔记
Linux socket编程 套接字定义描述 套接字的域 AF_INET ====>IPv4 AF_INET6 ====>IPv6 AF_UNIX ====>unix 域 AF_UP ...
- USB2.0协议学习笔记---描述符
USB设备描述符 字段名 长 度(字节) 地址偏移 含 义 bLenth 1 0 描述符长度 bDescriptorType 1 1 描述符类型 (这里为 1) ...