Vue基础(1)
Vue基础
基础
首先我们要知道Vue是什么,他是一种框架,一种渐进式的JavaScript框架,JavaScript我们都知道,是一种非常神奇的东西,主要用于渲染网页,可以给网页赋予很多动态的效果,当然还有很多别的用处,这里只是简单说说一下,毕竟我们的重点应该是介绍Vue,而不是JavaScript.
所以,在我们知道Vue是一种基于JavaScript的框架,那么他肯定有自己的优势,主要体现为以下几点:
- Vue可以独立的完成前后端分离的web项目
- Vue被设计为是可以自底向上逐层应用
- Vue的核心库只关注视图层,不仅易于上手而且便于和很多的第三方库结合.
- Vue和各种类库结合使用的时候,完全可以为复杂的单页应用起到一个驱动的作用,这是非常关键的.
当然这些单纯的理论可能会非常的无聊,所以我们只有在真正使用起来这个框架之后,才会理解到为什么要使用他,当然这是建立在你有别的框架使用经验的情况下.
导入
使用非常的简单,我们可以用两种方法来导入vue的文件,一种在线的cdn,或者把Vue的js文件下载下来,直接在本地导入的方法.Vue的在线CDN如下:
开发环境版本:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产环境版本,减少了空格和格式,加载速度会更快:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
如果要要本地导入,和导入JS的方法完全一样,举例如下:
<script src="js/vue.js"></script>
在导入了正确的Vue之后,我们就可以开始正式使用它了.
1. 挂载
通常情况下,我们的Vue是需要挂载的,挂载的目的是为了将css3的语法和我们页面中的标签进行绑定,进而通过vue来控制页面中的某个或者某些或者所有的标签.
要注意的一点是,挂载点只会检索到页面中匹配到的第一个结果,如果你是单个匹配的话,所以一般挂载点会选择用id选择器来挂载,因为id通常是唯一的,而类名不是唯一的,容易重复,通过类来取标签就会有误差.
还有一点就是html和body标签不可以作为挂载点,这是vue内部规定的,我们要牢记.
new Vue({
el:'#app'
})
# 或者我们可以直接将其赋给一个变量,比如
let app = new Vue({
el:'#app'
})
在挂载完成之后,我们就可以做一些简单的测试和操作了.
2. 插值表达式
顾名思义,就是往中间插入值,实际上用的还是模板语法{{}},只不过换了一种叫法
比如,我们这么定义
<body>
<div id="app">
<p>{{ msg }}</p> <!--这里就是定义在body里面的变量,双大括号包裹可以从后面定义的vue的data里面直接取值-->
<p>{{ info+'拼接内容' }}</p>
<h3>{{ msg[1] }}</h3> <!--插值表达式里面我们可以完成变量的渲染,基础运算,调用,以及很多基础的功能-->
<h3>{{ msg.slice(2,4) }}</h3>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 实例成员中的data就是为vue页面模板准备的,可以任意调用
let app = new Vue({
el: '#app',
data: {
msg: 'message',
info: 'vue变量信息'
}
});
console.log(app.info);
// 创建vue实例（new Vue）传进去的字典(对象)的key，被称为vue的实例成员,访问实例成员时,用 vue实例.$成员名,比如下面的例子,在取第一层的时候要加$符,点出来第二层就不再需要
console.log(app.$el);
console.log(app.$data);
console.log(app.$data.msg);
</script>
3. 事件
我们知道事件是一个非常广泛的概念,包括在js里面,jq里面,也都会有事件这种概念,而在之前的js里面我们通常会用ajax来绑定事件,从而向后端发送信息,这里Vue自己就附带了这种绑定事件的功能,通常会放在methods里面,具体如下:
<body>
<div id="app">
<p class="p1" v-on:click="fn">这是一个段落，被点击了{{ count }}下</p>
<!--在Vue里面我们通常用v-on:事件='自定义事件名称'来定义一个事件,然后在下面的Vue的methods里面写入该事件的具体逻辑-->
<!--事件的定义方式还包括
1. @事件名=""
2. :事件名=""
3. :事件名="fn($event,自定义参数)"
-->
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
count: 0,
action: '渲染',
// fn: function () {
// // console.log(app.count);
// // app.count ++
// console.log(this);
// 这里要注意,在data里面也可以直接定义事件,或者说方法,但是这里定义的方法所用的this不是指该vue实例对象，而是顶级Window对象,所以使用起来有诸多不便,还是推荐在methods里面去写事件函数
}
},
// methods就是为vue实例提供事件函数的
methods: {
fn: function () {
// console.log(app.count);
// app.count ++;
// console.log(this);
// 这里的this就是代表当前该vue实例对象,使用起来非常的方便`1
this.count ++
},
}
});
</script>
4. 创建对象
Vue里面创建对象通常有两种方式,即通过创建类,然后实例化产生对象,以及直接声明对象
通过创建类然后实例化来生成对象
function People(name, age) {
this.name = name;
this.age = age;
this.eat = function () {
console.log(this.name + '在吃饭');
}
}
let p1 = new People('Xiaoming', 17.5);
console.log(p1.name);
let res = p1.eat();
console.log(res);
直接声明创建对象
let stu1 = {
name: '张三',
age: 18,
eat () {
console.log(this.name + '在吃饭');
}
//这里我们直接用方法名(){}的方法就可以在对象内部定义其独有的方法,而且这种是简写的方法,即{fn:function(){}}<=>{fn(){}}是等价的
};
stu1.eat()
5. v-text和v-html
字面意思,v-text就是把里面的内容当做文本进行渲染,而v-html则会把其中的内容解析出来,包括可以解析html语法标签的文本.比如
<!--v-text：将所有内容做文本渲染 -->
<p v-text="msg + '拼接内容'"></p>
<!--v-html：可以解析html语法标签的文本,b会解析成加粗,然后赋给中间的文本值 -->
<p v-text="'<b>' + msg + '</b>'"></p>
<p v-html="'<b>' + msg + '</b>'"></p>
6. vue的过滤器
vue常用过滤器的的关键字为filters,用法和常用过滤器也相似.
<body>
<div id="app">
<!-- 这里默认会将msg作为参数传给filterFn -->
<p>{{ msg | filterFn }}</p>
<!--过滤器同样可以串联使用,这样前一个过滤器后的结果是后一个过滤器的起始数据-->
<p>{{ num | f1 | f2 }}</p>
<!--还可以可以同时对多个变量进行过滤,同时过滤器还可以额外传入参数辅助过滤-->
<!--过滤器会接收所有传入的参数，按传入的位置进行接收,也就是位置参数的意思-->
<p>{{ msg, num | f3(666, '好的') }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '文本内容',
num: 1
},
filters: {
filterFn(v1, v2) {
// console.log(v1);
// console.log(v2);
return `<b>${v1}</b>`;
},
f1(v1) {
return v1 * 100;
},
f2(v1) {
return v1 * 100;
},
}
})
</script>
7. 属性指令
属性也是我们经常会使用到的一些东西,因为属性可以修改很多东西,比如一个标签的长度,种类,或者是其样式等等.之前在js里面常用到的属性就是class和style等等.
<body>
<div id="app">
<!--下方的class、id、title、abc等是div标签的属性，属性指令就是控制它们的,其中class,id我们是比较熟悉的,title可能不太熟悉,但是也能理解是什么意思,abc可能不太理解,实际上只是一个自定义的属性,仅此而已,会方便我们以后取一些不好取的值,或者直接调用该标签-->
<div class="b1" id="b1" v-bind:title="title" :abc="xyz"></div>
<!--属性指令：固定用法, v-bind:属性名="变量"，简写方式 :属性名="变量" -->
<!--属性指令操作 style 属性-->
<div style="width: 200px;height: 200px;background-color: greenyellow"></div>
<!-- 通常：变量值为字典 -->
<div :style="mys1"></div>
<!--重点：一般vue都是结合原生css来完成样式控制 -->
<!--<div :class="c1"></div>-->
<!--class可以写两份，一份写死，一份有vue控制,这样对于整个项目会更加方便-->
<div class="box1" :class="c2"></div>
<!--{}控制类名，key为类名，key对应的值为bool类型，决定该类名是否起作用-->
<div :class="{box2:true, circle:cable}" @mouseover="changeCable(1)" @mouseout="changeCable(0)"></div>
<!--[]可以控制多个类名-->
<div :class="[c3, c4]"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
title: '12345',
xyz: 'opq',
mys1: {
width: '200px',
height: '200px',
// 'background-color': 'greenyellow'
backgroundColor: 'pink',
},
w: '200px',
c1: 'box1',
c2: 'circle',
cable: false,
c3: 'box1',
c4: 'circle'
},
methods: {
changeCable(n) {
this.cable = n;
}
}
});
//setInterval起到一个定时器的作用,最后一个参数是循环的时间,单位是微秒,中间则是我们需要实现的逻辑
setInterval(function () {
if (app.c1 === 'box1') {
app.c1 = 'box2';
} else {
app.c1 = 'box1';
}
}, 300)
</script>
Vue基础(1)的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...
随机推荐
- 起手一个mpvue项目准备
1,环境配置(http://mpvue.com/mpvue/quickstart.html) //全局安装vue-cli3脚手架 npm install -g @vue/cli @vue/cli-in ...
- C++11的闭包(lambda、function、bind)
c++11开始支持闭包,闭包:与函数A调用函数B相比较,闭包中函数A调用函数B,可以不通过函数A给函数B传递函数参数,而使函数B可以访问函数A的上下文环境才可见(函数A可直接访问到)的变量:比如: 函 ...
- linux安装MySQL-5.6.22-1.el6.i686.rpm-bundle.tar
1.首先搜索系统有没有安装过mysql,使用命令 rpm -qa|grep mysql 有的话先卸载 rpm -e --nodeps + mysql应用名字\ 2.在/usr/local下创建mys ...
- bzoj 1010,1011
上次应某位同学的要求先把代码给贴上了,今天还是细细讲讲比较好 bzoj 1010: dp+斜率优化 首先dp的思路并不是太难想出来,直接给方程:f[i] = min{f[j-1] + (sum[i]- ...
- Android客户端转换php服务端获取的时间戳的转换
今天在用JSON获取后台的数据的时候,发现一个奇怪的现象就是返回来的时间戳都是1970年这样的,很是纠结,最后发现时php和Java中时间的格式不一样造成的,所以我们本地客户端要做一个转换: /** ...
- 源码安装zabbix-oracle
源码安装zabbix_agent4.0.3 1.源码包下载地址:https://www.zabbix.com/download_sources 2.下载完后上传在任意目录用root用户创建以下脚本 ...
- Java-Class-C：org.springframework.http.converter.StringHttpMessageConverter
ylbtech-Java-Class-C:org.springframework.http.converter.StringHttpMessageConverter 1.返回顶部 1.1. impor ...
- 把swf反编译成fla的几种方法
2007年著 第一种方法: 利用IMPERATOR FLA1.63 ,这个软件有演示版 和正式版 , 演示版不能反编译Action Scropt,在利用正式版反编译的过程中有时会丢失Action Sc ...
- java之jvm学习笔记六(实践写自己的安全管理器)
安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用AccessController的checkPerssiom方法,访问控 ...
- oracle 管理表空间
表空间:是oracle数据库中最大的逻辑存储结构,与操作系统中的数据文件相对应,用于存储数据库中用户创建的所有内容 表空间>数据文件 4.1创建一个永久性表空间myspace create ta ...