Vue前端框架的基础学习,为之后打个基础

Vue

首先,在使用vue之前,我们需要先下载好一个vue.js文件,才能继续进行vue的学习,下载教程如下:

1、进入官网:https://v2.vuejs.org/

2、选择页面中的Learn,再选中其中的Guide选项

3、进入如下界面:

4、选择左边侧栏的这个选项:

5、向下滑,会看到这样一个界面,

上面是开发版本,下面是生产版本,根据需求下载其中一个就行啦!

下载好之后,直接复制到项目里面,已经创建好的js文件夹里面就能使用了:

快速地应用一下:

结果:

Vue常用指令

1、v-bind:

我们之前使用:

<a href="https://www.baidu.com/">百度一下</a>

跳转到百度界面

现在可以改成加入Vue属性加入到超链接的标签中:

<div id="app">
    <a v-bind:href="url">百度一下</a>
</div>


<script src="js/vue.js"></script>
<script>
new Vue({
    el:"#app",
    data(){
        return{
            username:"",
            url:"https://www.baidu.com/"
        }
    }
})
</script>

其中的v-bind可以省略,但是其中的:不能省略

v-model

通过使用该命令,实现双向绑定

v-on

相关应用:

当然,该命令也有相应的简便写法:用@符号直接代替

v-if(与v-show命令的使用方法一样)

v-if与v-model的联立使用:

页面呈现出来的数据能够根据输入框里面的数值不断变换

v-for

不带索引的循环遍历:

带着索引的循环遍历:

posted @ 2022-10-31 23:19  yesyes1  阅读(21)  评论(0编辑  收藏  举报