Vue框架入门学习(一)——Vue 1.0
文章目录
- 一、简述
- 二、入门介绍
- 1.Vue 1.0
- 2.Vue基本指令(directive)
- 2.1 v-bind
- 2.2 v-model 数据双向绑定
- 2.3 v-text
- 2.4 v-html
- ※2.5 v-on(Vue事件)
- 2.6 v-show与v-if
- 2.7 v-for
- 2.8 虚拟dom
- 2.9 ：key
- 2.10 v-pre 预编译
- 2.11 v-cloak阻塞
- 3.总结
- 3.1 vm基本结构
- 3.2 概念
- 3.3 指令
前端渲染 vs 后端渲染
前端渲染：将一些细碎的零件通过自己组装来完成显示层，降低服务器负担，带宽压力小(由于显示层都拆成了散件，所以传输方便),用户体验更好，因为不用总去刷新也可以得到数据。
后台渲染：直接完成整体架构，SEO，没有兼容问题，安全性更高，无法看见后台代码，但是维护差
一、简述
首先，Vue属于前台渲染，且更加倾向于数据方面，而不是在表现层方面代码更多的可以通过内部封装来实现。
二、入门介绍
1.Vue 1.0
在Vue1.0中，经常会将一个Vue.js的库直接导进来，调用使用。
在Vue2.0后，将会使用npm下载，webpack打包整理Vue。
首先来写一个示例代码
<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>
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)
实际意义也就是通过这些指令来补充html所无法达到的功能，像获取数据之类的。
2.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.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>
2.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>
2.4 v-html
转义输出，用处是有的，某些网站在评论的时候直接添加对应的html代码，但是如果评论了