vue的第一个demo-vue的学习之旅

最新推荐文章于 2021-05-28 22:21:29 发布

still water

最新推荐文章于 2021-05-28 22:21:29 发布

阅读量102

点赞数

分类专栏：笔记文章标签： js vue html

本文链接：https://blog.csdn.net/weixin_43131450/article/details/116852600

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.导入vue库，以npm导包方式

代码都上传到了gitee，可以clone到本地，另外还附加了es6的学习笔记
https://gitee.com/reflectstar/vue-demo.git

// 初始化npm模块
npm init -y
npm install vue

新建一个文件夹作为自己的工作目录，在此工作目录中打开terminal，输入上述两个指令
在这里插入图片描述
当文件夹出现两项内容，说明初始化成功，可以正常使用vue库了，当然也可以直接下载vue库，然后引入的方式。

2.编写建议的模型与数据绑定效果

给vscode加两个插件
在这里插入图片描述

新建一个index.html

// An highlighted block
<body>
    <div id="app">
        <h1>{{name}},is very handsome!!!</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vue = new Vue({
            el:"#app",
            data:{
                name:"dengyongqing"
            }
        })
    </script>
</body>

页面效果是
在这里插入图片描述
F12，通过控制台体会变量与绑定视图元素之间的关系

3.体会双向绑定效果

// An highlighted block
<body>

    <div id="app">
        <input type="text" v-model="num">
        <button v-on:click="num++">like</button>
        <button v-on:click="cancel">cancel</button>
        <h1>{{name}},is very handsome!!! and got {{num}} likes</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //1.声明式渲染
        let vue = new Vue({
            el:"#app",
            data:{
                name:"dengyongqing",
                num:1
            },
            methods: {
                cancel() {
                    this.num--;
                }
            }
        })
        //2.双向绑定，模型变化，视图变化，反之亦然
        //3.事件处理
        //4.v-xx指令
        //{1.new vue(),将数据关联到视图模板中 2.通过指令或者编写方法来进行响应}
    </script>
</body>

效果
在这里插入图片描述

still water

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的第一个demo-vue的学习之旅

1.导入vue库，以npm导包方式// 初始化npm模块npm init -ynpm install vue新建一个文件夹作为自己的工作目录，在此工作目录中打开terminal，输入上述两个指令当文件夹出现两项内容，说明初始化成功，可以正常使用vue库了，当然也可以直接下载vue库，然后引入的方式。2.编写建议的模型与数据绑定效果给vscode加两个插件新建一个index.html// An highlighted block<body> <div id
复制链接

扫一扫