vue⼊门教程（1）——IDEA中vue的安装及简单使⽤Vue教程
前⾔
我们在学会使⽤Vue之前，我们得学会如何在IDEA中安装vue，并且在Chrome中加⼊扩展程序vue-devtools
在IDEA中安装vue
这个请访问博主博客。
在Chrome中加⼊扩展程序vue-devtools
下载vue-devtools
提取码：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}}的⽅式来渲染定义的那么属性idea开发安卓app教程
<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实例处于不同的⽣命周期
时，对应的函数就会被触发和调⽤。
⽣命周期：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。