Vue入门，第一个Vue项目、Vue简洁、快速上手

鹿小苏

已于 2023-08-30 16:15:35 修改

阅读量237

点赞数 3

文章标签： vue

于 2023-08-30 16:13:56 首次发布

本文链接：https://blog.youkuaiyun.com/qq_69073409/article/details/132581634

版权

创建第一个Vue项目

创建一个.html文件，在vs编辑器中编写代码

第一步在head标签中引出Vue官方的js,也就是Vue的依赖

 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

第二步创建一个承载Vue实例的容器

<div id="app">
        <li>{{message}}</li>
</div>

此时的message类似编程中的变量，在下步Vue实例中定义生成

第三步定义Vue实例

<script>
    var app=new Vue({
        el:'#app',
        data:{
            message:'hello'
        }
    })
</script>

el->绑定容器的id

data：该实例下存放的数据

在浏览器中正常显示hello 代表运行成功，否则显示{{message}},可检测src是否正常导入，链接是否为vue2版本

声明式渲染

标签内的动态内容可以用变量绑定

而标签中的属性则用：v-bind ->可以动态修改绑定标签中属性的值

示范

绑定容器部分

 <div id="app">
        <li>{{message}}</li>
        <li v-bind:title="title">
            <!-- 该标签还可简写为 <li :title="title"></li>= <li v-bind:title="title"></li>
去掉了v-bind只留下:
-->
            鼠标悬停查看隐藏信息
        </li>
    </div>

Vue实例部分

<script>
    var app=new Vue({
        el:'#app',
        data:{
            message:'hello',
            title:"看到我了"
        }
    })
</script>

条件渲染

当需要进行条件渲染时，就需要v-if 、v-show,控制该标签的显示隐藏

示例

容器部分

<div id="app">
        <li v-if="seen">v-if</li>
        <li v-show="seen">v-show</li>
    </div>

Vue实例部分

<script>
    var app=new Vue({
        el:'#app',
        data:{
            seen:true
        }
    })
</script>

此时浏览器中为显示

v-if

v-show

当seen为false时，此时两个标签都不显示按下 F12，此时浏览器都不显示内容，但只有<li v-show>这个标签存在。二者区别在于v-if从代码上否定了标签的存在，而v-show只是属性上隐藏了该标签，但是代码却实际存在

循环渲染

当某个标签结构需要重复出现，只是内容不同时可使用v-for

示范

容器部分

<div id="app">
        <h1 v-for="(item,index) in list">下标{{index}}:{{item.text}}</h1>
    <!-- item代表集合list中的某个元素，index代表元素下标 -->
 </div>

Vue实例

<script>
    var app=new Vue({
        el:'#app',
        data:{
            list:[
                {text:'a'},
                {text:'b'},
                {text:'c'}
            ]
        }
    })
</script>

监听用户事件

当用户产生某些行为如：点击，双击，鼠标悬停等行为时，需要对应的标签元素发生变化时，则需要监听用户事件v-on

示范

容器部分

<div id="app">
        <li>{{message}}</li>
        <li :title="title">
            <!-- 该标签还可简写为 <li :title="title"></li>= <li v-bind:title="title"></li> 
            去掉了v-bind只留下:
            -->
            鼠标悬停查看隐藏信息
        </li>
        <li v-if="seen">v-if</li>
        <li v-show="seen">v-show</li>
        <li v-for="(item,index) in list">下标{{index}}:{{item.text}}</li>
        <!-- item代表集合list中的某个元素，index代表元素下标 -->
        <li>count:{{count}}</li>
        <button type="button" v-on:click="add(2)">+1</button>
    <!-- add(2) 2 代表参数 此处可以传参 -->
    <!-- v-on:click="add"可简写为@click="add">+1</button>==v-on:click="add">+1</button> -->
    <!-- 其中click为事件说明、click为点击事件的意思，相同还有混动事件等如表所示 -->
    </div>

Vue实例

<script>
    var app=new Vue({
        el:'#app',
        data:{
            count:0
        },
        methods:{
             add(a){
                this.count=this.count+a
                 //a代表的参数2
            }
        } 
    })
</script>

this代表app这个Vue实例也是app.count，当某些原因修改app这个变量名时，防止其他代码受影响故用this

监听事件大全

命令	说明
click	点击事件
input	监听输入框的输入事件，当输入框的值发生变化时触发
change	监听表单元素值的改变事件，常用于选择框、单选按钮、复选框等元素
submit	监听表单提交事件，当表单提交时触发
focus	监听元素获得焦点事件，当元素获得焦点时触发
blur	监听元素失去焦点事件，当元素失去焦点时触发
keydown、keyup	监听键盘按键按下和松开事件
mouseenter、mouseleave	监听鼠标移入和移出元素事件
mousedown、mouseup	监听鼠标按下和松开事件
mousemove	监听鼠标移动事件
contextmenu	监听鼠标右键点击事件
scroll	监听滚动条滚动事件

表单绑定

v-model 可以使绑定的元素和变量的内容保持实时更新一致。

示范

容器

<body>
    <div id="app">
        <input type="text" v-model="message" name="in" id="i">
        <li>输入的消息是：{{message}}</li>
    </div>
</body>

Vue实例

<script>
    var app=new Vue({
        el:'#app',
        data:{
            message:'hello'
        }
    })
</script>

浏览器大概显示内容

输入框：你好

输入的消息是：你好

休息一下，本篇完结。完整代码：github