这篇博客详细介绍了Vue.js的学习过程，包括安装步骤、常用操作如声明式渲染、双向绑定、事件处理和生命周期钩子。还深入讲解了指令、组件、以及Vue Router的基本用法，适合初学者掌握Vue.js的基础知识。
安装
1.安装Node.js
npm是Node提供的管理工具，可以方便很多前端框架下载包括，jquery,AngularJs,VueJs
2.安装后测试出现版本信息则安装成功
node -v
3.Node.js自带NPM在控制台输入node -v测试是否成功
4.npm默认仓库地址在国外，访问较慢，建议使用淘宝镜像,切换镜像比较麻烦，这边使用工具切换：nrm，安装后重启
npm install nrm -g //-g 表示为全局变量
nrm ls //查看npm的仓库列表
nrm use taobao //切换指定镜像
nrm test npm //测试速度
5.新建一个空项目进行vue安装
-
在idea的左下角，有个Terminal按钮，进入hello-vue目录，先输入：
npm init -y进行初始化 -
安装Vue，输入命令：
npm install vue --save然后就会在hello-vue目录发现一个node_modules目录，并且在下面有一个vue目录。node_modules是通过npm安装的所有模块的默认位置。
常用操作
1.声明式渲染
<body>
<div id="app">
<h2>{
{name}}，非常帅！！！</h2>
</div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
// 创建vue实例
var app = new Vue({
el:"#app", // el即element，该vue实例要渲染的页面元素
data:{
// 渲染页面需要的数据
name: "峰哥"
}
});
</script>
2.双向绑定
<body>
<div id="app">
<input type="text" v-model="num">
<h2>
{
{name}}，非常帅！！！有{
{num}}位女神为他着迷。
</h2>
</div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
// 创建vue实例
var app = new Vue({
el: "#app", // el即element，该vue实例要渲染的页面元素
data: {
// 渲染页面需要的数据
name: "峰哥",
num: 5
}
});
</script>
- 我们在data添加了新的属性：
num - 在页面中有一个
input元素，通过v-model与num进行绑定。 - 同时通过
{ {num}}在页面输出
3.事件处理
<button v-on:click="num++">点我</button>
- 这里用
v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num - 普通click是无法直接操作num的。
4.方法调用
html:
<div id="app">
{
{num}}
<button v-on:click="add">加</button>
</div>
js:
var vm = new Vue({
el:"#app",
data:{
num: 0
},
methods:{
add:function(){
// this代表的当前vue实例
this.num++;
}
}
})
5.生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。
钩子函数
beforeCreated：我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化时调用，也可以将他理解为初始化函数比较方便一点，在Vue1.0时，这个函数的名字就是init。
created：在创建实例之后进行调用。
beforeMount：页面加载完成，没有渲染。如：此时页面还是{ {name}}
mounted：我们可以将他理解为原生js中的window.οnlοad=function({.,.}),或许大家也在用jquery，所以也可以理解为jquery中的$(document).ready(function(){….})，他的功能就是：在dom文档渲染完毕之后将要执行的函数，该函数在Vue1.0版本中名字为compiled。 此时页面中的{ {name}}已被渲染成峰哥
beforeDestroy：该函数将在销毁实例前进行调用 。
destroyed：改函数将在销毁实例时进行调用。
beforeUpdate：组件更新之前。
updated：组件更新之后。
例子：
// 创建vue实例
var app = new Vue({
el: "#app", // el即element，该vue实例要渲染的页面元素
data: {
// 渲染页面需要的数据
name: "峰哥",
num: 5
},
methods: {
add: function(){
this.num--;
}
},
created: function () {
this.num = 100;
}
});
结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P3N8L5f5-1586135918425)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20191031100110721.png)]
6.指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
1.差值表达式
-
花括号
{ {表达式}}支持js语法，可以调用js内置函数，可以获取vue实例中的数据或函数
差值闪烁：使用{ {}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的
{ {}}，加载完毕后才显示正确数据 -
v-text和v-html
使用v-text和v-html指令来替代
{ {}}说明：
- v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
- v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
2.v-model双向绑定
例子：
<div id="app">
<input type="checkbox" v-model="language" value="Java" />Java<br/>
<input<
最低0.47元/天 解锁文章
扫一扫
1199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
