前言
我们在学会使用Vue之前，我们得学会如何在IDEA中安装vue，并且在Chrome中加入扩展程序vue-devtools
在IDEA中安装vue
这个请访问博主博客vue的安装。
在Chrome中加入扩展程序vue-devtools
下载vue-devtools
vue-devtools下载地址：https://pan.baidu.com/s/113sGjOcz2AlhW9fAh57I9g
提取码：4q8q
在Chrome中添加扩展程序
我们可以直接输入chrome://extensions/来访问
打开以后我们直接将解压的文件拉倒这个页面即可，你没有看错，就是直接拉，谷歌会自动安装
但我们打开我们自己写的html时，点开检查就会出现vue
Vue入门案例
1.HTML模板中写入内容
<div id="app">
<h1>周杰伦<h1>
</div>
2.vue渲染
-
首先通过new Vue()来创建Vue实例
-
然后构造函数接受一个对象，对象中含有属性：
el：是element的缩写，通过id选中要渲染的页面元素 data：数据，是一个对象，里面有很多属性，都可以渲染到视图中 -
页面中的h1元素中，我们通过{ {name}}的方式来渲染定义的那么属性
<div id="app">
<h2>{
{name}} 非常帅</h2>
</div>
<script src="/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 生成一个Vue实例
var app = new Vue({
el:"#app", // el,即element。要渲染的的页面元素
data:{
// 数据
name:"周杰伦"
}
})
</script>
我们可以在vue中进行修改属性
3.双向绑定
我们对刚才的实例进行修改
<body>
<div id="app">
<input type="text" v-model="num">
<h1>{
{name}}唱歌很好听，{
{num}}名粉丝为其着迷</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript"></script>
<script>
//生成一个Vue实例
var vue = new Vue(
{
el:"#app",//el,即element。要渲染的页面元素
data:{
//数据
name:"周杰伦",
num:1,
}
}
)
</script>
</body>
- 我们在data中添加新的属性：num
- 在页面中有一个
input元素，通过v-model与num进行绑定 - 通过{ {num}}在页面输出
4.事件处理
我们在页面中添加一个button按钮，每次点击num加1
<button @click="num++">点我</button>
5.生命周期钩子
每个Vue实例在被创建的时候都要经历一系列初始化过程：创建实例，装载模板，渲染模板等等。Vue为为生命周期中的每个状态都设置了一个钩子函数（监听函数）。每个Vue实例处于不同的生命周期时，对应的函数就会被触发和调用。
生命周期：
5.1钩子函数
例如：created代表vue实例创建后；
我们可以在Vue中定义一个created函数，代表这个时期的构造函数
<script>
//生成一个Vue实例
var vue = new Vue(
{
el:"#app",//el,即element。要渲染的页面元素
data:{
//数据
name:"周杰伦",
num:1,
},
//钩子函数
created(){
this.name = "我刚刚说周杰伦";
}
}
)
</script>
5.1this
我们可以看下在vue内部this变量是谁，我们在created的时候打印this
created(){
this.name = "我刚刚说周杰伦";
console.log(this);
}
控制台输出：
我们可以看到这个this对象的输出
后续继续更新，感谢支持！
转载：https://blog.csdn.net/qq_43413774/article/details/115766352
查看评论