十日谈 : Vue入门之了解Vue
欢迎阅读我的Vue学习日记
本文依据教程<Vue.js从入门到项目实战>,感兴趣者请购买正版并学习
Vue的安装方式
博主使用webstorm进行前端开发,就不再赘述其安装过程,破解方式及安装教程详见: https://www.jianshu.com/p/d120ab55bfdd 亲测有效.
Vue作为一个js文件可以直接在Vue官网进行下载: https://cn.vuejs.org/v2/guide/
HelloVue.js
将vue.js放在创建的js文件夹中,通过如下语句调用:
<script src="../js/vue.js"></script>
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
第一个Vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">{
{
message}}</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:#app,
data:{
message:Hello Vue
}
})
</script>
</body>
</html>
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>Star:{
{
counter}}</h2>
<button v-on:click="add">赞</button>
<button v-on:click="sub">踩</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:#app,
data:{
counter:0
},
methods:{
add:function () {
console.log(add被执行);
this.counter++
},
sub:function () {
console.log(sub被执行);
this.counter--
}
}
})
</script>
</body>
</html>
el指定挂载元素 data定义数据 methods定义方法 更多定义内容参考: https://cn.vuejs.org/v2/api/
注意事项:不要带入错误的编码习惯,在符号间随意的打空格,v-on:click监听点击是一个整体,不能写成v-on : click console.log():在具备调试功能的浏览器上,window对象中会注册一个名为console的成员变量,指代调试工具中的控制台。通过调用该console对象的log()函数,可以在控制台中打印信息。可以观察add和sub方法是否照常运行
Vue的生命周期
Vue的源码在执行调用vue.js过程中就在进行许多操作,这些操作汇成Vue的生命周期.当Vue做某些操作就会进行回调.
