Vue框架学习(一)——Vue1.0
文章目录
-
- 一、简述
- 二、入门
-
- 1、Vue1.0
- 2、Vue基本指令(directive)
-
- <1>、v-bind
- <2>、v-model数据双向绑定
- <3>、v-text
- <4>、v-html
- ※<5>、v-on(Vue事件)
- <6>、v-show与v-if
- <7>、v-for
- <8>、虚拟DOM
- <9>、:key
- <10>、v-pre预编译
- <11>、v-cloak阻塞
- 3、总结
-
- <1>、vm基本结构
- <2>、概念
前端渲染 VS 后端渲染
前端渲染：将一些细碎的零件通过自己组装来完成显示层，降低服务器负担，带宽压力大（由于显示层都拆成了散件，所以传输方便），用户体验好，因为不用总去刷新也可以得到数据
后端渲染：直接完成整体架构，SEO，没有兼容问题，安全性高，无法看见后台代码，但是维护差
一、简述
Vue属于前端渲染，且更加倾向于数据方面，而不是在表现层方面代码更多的可以通过内部封装来实现。
二、入门
1、Vue1.0
在Vue1.0中，经常会将一个Vue.js库直接导进来，调用使用
在Vue2.0后，将会使用npm下载，webpack打包整理Vue
首先先写一个示例代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testtitle>
<script src="vue.js" charset="utf-8">script>
head>
<script>
let vm = new Vue({
//代表只在此领域范围内，这个Vue对象引用的才有意义
//用el组件标记根组件。
el:'#divTest'
});
script>
<body>
<div id="divTest">div>
body>
html>
运行之后会报错：
这是因为上面的Script标签只和目录内的文件起作用，并且是先识别divTest为我们的根目录，在匹配之前，没有定义，所以就要做出一定改变，以下如图。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestVuetitle>
<script src="vue.js" charset="utf-8">script>
head>
<script>
let vm = new Vue({
//代表只在此领域范围内，这个Vue对象引用的才有意义
//用el组件标记根组件。
el:'#divTest'
});
script>
<body>
<div id="divTest">div>
body>
<script>
let vm = new Vue({
//代表只在此领域范围内，这个Vue对象引用的才有意义
//用el组件标记根组件。
el:'#divTest'
});
script>
html>
重新运行就可以了。
然后来练习一下使用Vue来进行输出
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestVuetitle>
<script src="vue.js" charset="utf-8">script>
head>
<body>
<div id="divTest">
姓名：{
{name}}<br>
年龄：{
{age}}
div>
body>
<script>
let vm = new Vue({
//代表只在此领域范围内，这个Vue对象引用的才有意义
//用el组件标记根组件。也称为容器
el:'#divTest',
//数据本身
data:{
name:'blue',
age:18
}
});
script>
html>
在Vue的对象内用data来标明某个对象的值，然后再之前el的根标签内，通过{ {}}来将这个值进行直接的调用。去输出。
这样写是有一定好处的，因为data内的数据变更了，那么现实的数据也会变更。
而如果我们需要这些参数去做到一定的操作，是可以将具体操作封装在method内的，如下所示：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestVuetitle>
<script src="vue.js" charset="utf-8">script>
head>
<body>
<div id="divTest">
姓名：{
{name}}<br>
年龄：{
{age}}<br>
出生：{
{calBirth()}}
div>
body>
<script>
let vm = new Vue({
//代表只在此领域范围内，这个Vue对象引用的才有意义
//用el组件标记根组件。也称为容器
el:'#divTest',
//数据本身
data:{
name:'blue',
age:18
},
method:{
calBirth(){
//函数名，声明函数
return new Date().getFullYear()-this.age;
}
}
});
script>
html>
2、Vue基本指令(directive)
<1>、v-bind
这个指令可以用于任何属性
当想往标签内的内用输入参数时，可以使用这个标签属性
<html lang="en" dir="ltr" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>TestVuetitle>
<script src="vue.js" charset="utf-8">script>
head>
<body>
<div id="divTest">
<strong title="{
{age}}">{
{name}}strong>
div>
body>
<script>
let vm = new Vue({
//代表只在此领域范围内，这个Vue对象引用的才有意义
//用el组件标记根组件。也称为容器
el:'#divTest',
//数据本身
data:{
name:'blue',
age:18
}
});
script>
html>
一般情况下我们想让标签获取到参数是这么写的，但是输出会有问题，显示的strong title不正确，这时候我们就可以使用到v-bind。
<html lang="en" dir="ltr" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>TestVuetitle>
<script src="vue.js" charset="utf-8">script>
head>
<body>
<div id="divTest">
<strong :title="age+'岁'">{
{name}}strong>
div>
body>
<script>
let vm = new Vue({
//代表只在此领域范围内，这个Vue对象引用的才有意义
//用el组件标记根组件。也称为容器
el:'#divTest',
//数据本身
data:{
name:'blue',
age:18
}
});
script>
html>
简写：可以省略v-bind，只留下一个冒号
再举一个例子，引入网络图片的例子：
<html lang="en" dir="ltr" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>TestVuetitle>
<script src="vue.js" charset="utf-8">script>
head>
<body>
<div id="divTest">
<strong :title="age+'岁'">{
{name}}strong>
<img :src="url" alt="">
div>
body>
<script>
let vm = new Vue({
//代表只在此领域范围内，这个Vue对象引用的才有意义
//用el组件标记根组件。也称为容器
el:'#divTest',
//数据本身
data:{
name:'blue',
age:18,
url:'https://123p0.sogoucdn.com/imgu/2018/04/20180402191839_320.jpg'
}
});
script>
html>
但是有两个标签的使用方法是不同的，第一个是class，第二个是style
class的写法类似于一种数组写法，而style类似于一种json写法。
但是也可以用v-bind来表示。
有这样一种情况，class用来做一种选择判断才生效的情况，如果写成字符串就不好表示，但是如果写成数组就会好很多，假如说用户达到心悦3才会显示某图标，就可以用这种方法。
<html lang="en" dir="ltr" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>TestVuetitle>
<script src="vue.js" charset="utf-8">script>
head>
<body>
<div id="divTest">
<div :class="class_arr">div>
div>
body>
<script>
let vm = new Vue({
//代表只在此领域范围内，这个Vue对象引用的才有意义
//用el组件标记根组件。也称为容器
el:'#divTest',
//数据本身
data:{
name:'blue',
age:18,
class_str:'aa bb cc dd active',
class_arr:['aa','bb','cc','dd','active']
}
});
script>
html>
同理style也是一样的。
<2>、v-model数据双向绑定
v-model仅仅适用于输入类组件，进行标签与data的双向绑定。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v_modeltitle>
<script src="vue.js">script>
head>
<body>
<div id="div1">
<input type="text" v-model="name">
<p>
{
{name}}
p>
div>
<script>
let vm = new Vue({
el:'#div1',
data:{
name:'blue'
}
})
script>
body>
html>
利用v-model来进行变量与输入标签的双向绑定
注： 通过v-model所引入的数据全是字符串属性，如果想换成其他类型，需要使用转型的API
然后写一个在methods内写入两个v-model进行参数的计算：
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>v_modeltitle>
<script src="vue.js" charset="utf-8">script>
head>
<body>
<div id="div1">
<input type="text" v-model="n1">+
<input type="text" v-model="n2">=
{
{sum()}}
div>
body>
<script>
let vm = new Vue({
el:'#div1',
data:{
n1:0,
n2:0
},
methods:{
sum(){
return parseInt(this.n1)+parseInt(this.n2);
}
}
});
script>
html>
<3>、v-text
非转义输出
用法十分简单，就是取代了手动输出，而是通过方法进行调用，基本没啥用，标签也不会自动转化。
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>title>
<script src="vue.js" charset="utf-8">script>
head>
<body>
<div id="div1" v-text="str">
div>
body>
<script>
let vm=new Vue({
el: '#div1',
data: {
str:"123456
"
},
});
script>
html>
<4>、v-html
转义输出，用处是有的，某些网站在评论的时候直接添加对应的html代码，但是如果评论了