Vue基础知识必备

最新推荐文章于 2024-08-08 08:32:03 发布

White Root

最新推荐文章于 2024-08-08 08:32:03 发布

阅读量216

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/root1228544694/article/details/104611863

版权

本文介绍了Vue.js的基础知识，包括Vue.js的下载、数据操作、事件处理、条件渲染、列表遍历、双向绑定及TODOLIST案例。同时也简要提及了Vue的生命周期，但未深入探讨ES6语法。

摘要由CSDN通过智能技术生成

Vue入门笔记

Vue.js下载
操作数据
操作属性和数据
操作点击事件
条件渲染
v-show
普通列表设置
遍历对象(js[字典])
遍历列表中字典
双向绑定
TODOLIST案例
其他了解
- ES6语法（略）
- 生命周期

Vue.js下载

Vue.js下载
Vue.js 的⽬标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核⼼是⼀个响应的数据绑定系统。

操作数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作数据</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
   
            new Vue({
   
                el:".div01",
                data:{
   
                    content:"2020春天"
                }
            })
        }
    </script>
</head>
<body>
<div class="div01">{
   {
   content}}</div>
</body>
</html>

操作属性和数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作属性</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
   
            new Vue({
   
                el:".a1",
                data:{
   
                    url:"http://www.taobao.com",
                    content:"taobao"
                }
            })
        }
    </script>
</head>
<body>
<!--设置属性-->
<!--v-bind:属性名="vue变量"-->
<!--<a href="http://www.baidu.com">百度</a>-->

<!--<a v-bind:href="url" class="a1">{
   {
   content}}</a>-->

<!--v-bind简写方式（:）-->
<a :href="url" class="a1">{
   {
   content}}</a>

</body>
</html>

操作点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击事件</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
   
            new Vue({
   
                el:".btn01",   //类前面加点，后面逗号
                methods:{
      //methods  sssss
                    /*定义的方法名:function () {
                     方法的实现
                     }*/
                    show_info:function () {
   
                        alert("弹出")
                    }
                }
            })
        }
    </script>
</head>
<body>
<!--vue的点击事件语法v-on:事件='vue定义的方法名'-->
<!--<input type="button" value="点击" v-on:click="show_info"  class="btn01">-->

<!--v-on:可以简写@-->
<input type="button" value="点击" @click="show_info"  class="btn01">
</body>
</html>

条件渲染

    <script src="vue.js"></script>
    <script>
        window.onload=function () {
   
            new Vue({
   
                el:".div01",  //类不要忘记点.,控件后，不要忘记,
                data:{
   
                    flag:1  //1输出---其他
                    //若为a---->aaaa,b------->bbbb,c----->cccc
                }
            })
        }
    </script>


<div class="div01">
    <div v-if="flag=='a'">aaaa</div>
    <div