vue记忆结构(一)

最新推荐文章于 2024-01-18 11:04:59 发布

光头和尚111

最新推荐文章于 2024-01-18 11:04:59 发布

阅读量199

点赞数 1

分类专栏： vue 文章标签：初学vue vue记忆结构

本文链接：https://blog.csdn.net/qq_42838723/article/details/88418047

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前端
html+css+js+jquery
前端MVC框架：React，Angular(谷歌的)，Vue，Node
表达式，命令，组件，模板，路由

前期准备：
1.html常用标签，常用属性（要背的比较6）
2.基本的八类CSS属性，要有清醒的认识
3.原生JS，最重要的是DOM操作（节点的增删改查）

使用：下载，导入
part1.表达式
（1）表达式在标签中，作为内容使用{{ 表达式 }}
（2）表达式可以直接显示变量，进行算数运算，显示JSON数据，也可以执行js代码（但是极不推荐）
（3）表达式也可以存在于标签的属性中，不需要再写大括号
（4）表达式中，可以直接显示字符串，比如{{“abc”}}这样显示的是abc这个字符串内容，{{abc}}这样，abc会被当作是一个变量或方法名
（5）表达式中不能出现if-else，可以用复合运算符，比如：
{{ 2<3?’dui’:’bu dui’ }}
part2:指令
1.指令，带有“v-”开头的特殊的属性（本质上是个属性）
2.用途，表达式的值发生改变的时候，将某些行为应用到文档对象（DOM）上
3.书写位置：任意HTML元素的开始标签内
4.注意：一个开始标签内，可以写入多个指令，多个指令之间用空格分割

5.v-show指令
作用：控制切换一个元素的显示和隐藏
语法：v-show=表达式
根据表达式结果的真假，确定是否显示元素
<h1 align="center" v-show="false">{{ list }}</h1>

6.v-on指令
作用：为html元素绑定监听事件
语法：v-on：事件名称=‘函数名称（）’
简写语法：@事件名称=‘函数名称（）’

7.v-model指令
作用：在表单元素上创建双向数据绑定
用法：在一个可接受录入的标签，加入v-model
<input id="inp" type="text" v-model="str">
再在其他地方使用这个数据

8.v-if
作用：出现在任何标签的属性中，来确定这个标签是否要被渲染，if表达式为真就渲染
可以和v-else或v-else-if搭配使用
<h1 align="center" v-if="a===1">我的备忘录1</h1>
<h1 align="center" v-else-if="a===2">我的备忘录2</h1>
<h1 align="center" v-else>我的备忘录3</h1>

9.v-for

作用:遍历data中的数据,并在页面进行数据展示

语法: v-for='(item,index) in array'

item表示每次遍历得到的元素,index表示item的索引,是可选参数

<div id="abc">
        
        <h1 v-for="(i) in stus"  style="text-align: center">学号:{{ i.sid+"------姓名:"+i.sname}}</h1>
</div>


<script type="text/javascript">
    var vm=new Vue({
        el:"#abc",
        data:{
            stus:[
                {sid:2,sname:"陈龙"},
                {sid:3,sname:"常金鹤"},
                {sid:4,sname:"陈江红"},
            ],
        }
    });
</script>

10.v-bind

作用:绑定HTML标签的属性

语法:v-bind: 属性名='表达式'

例如: 绑定一个属性<img v-bind:src='xxx'/>

绑定多个属性<img v-bind:{src:'xxx',}/>

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 利用v-迭代出数据,并且使用v-bind对列表所点击的进行绑定,点击变为红色 -->
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <style type="text/css">
        .red{
            background-color: red;
        }
    </style>
</head>
<body>
<div id="a">
    <ul style="list-style-type: none;text-align: center">
        <li v-for='(item,index) in arr' @click="change(index)" v-bind:class="{red:item.status}">{{ item.des }}</li>
    </ul>
</div>
</body>
</html>
<script type="text/javascript">
    var vm=new Vue({
        el:"#a",
        data:{
            arr:[
                {des:'111111',status:false},
                {des:'222222',status:false},
                {des:'333333',status:false},
                {des:'444444',status:false},
                {des:'555555',status:false},
                {des:'666666',status:false},
            ]
        },
        methods:{
            change:function (xuhao) {
                for (var i=0;i<this.arr.length;i++){
                    this.arr[i].status=false;
                }
                this.arr[xuhao].status=true;
            }
        }
    });
</script>