十日谈 : Vue入门之了解Vue

最新推荐文章于 2022-04-24 17:17:51 发布

扔猿太膻

最新推荐文章于 2022-04-24 17:17:51 发布

阅读量226

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_36013952/article/details/104235423

版权

前端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

十日谈 : Vue入门之了解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 只关注视图层，采用自底向上增量开发的设计。

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 视图将也会产生相应的变化。

Vue简易点赞按钮

<!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方法是否照常运行