vue基础以及html基础以及一些杂七杂八的东西

weixin_64419330

已于 2023-05-22 15:55:13 修改

阅读量118

点赞数

文章标签： vue.js javascript 前端

于 2023-05-14 14:10:07 首次发布

原文链接：https://www.bilibili.com/video/BV12J411m7MG?p=13&spm_id_from=pageDriver&vd_source=0e3e657344823fa5eaf8544d3549f349

版权

//内容来自黑马程序员相关教程

#列表相关

<ul>定义无序元素列表整体，用于包裹li标签

<ol>定义有序元素列表整体，用于包裹li标签

<li>列表每一项

<dl>表示自定义列表整体，用于包裹dt、dd标签

<dt>表示自定义列表主题

<dd>表示自定义列表针对主题的每一项内容

#表格相关

<table>表格整体，包裹多个tr

<tr>表格每行，包裹td

<td>表格单元格，包裹内容

<th>表头单元格，文字加粗居中（用以替代td）

<caption>表格大标题，表格整体顶部居中

rowspan、colspan 跨行、跨列合并，属性值为合并单元格个数

#表单相关

<select>下拉表单整体

<option>下拉表单每一项（selected关键字默认选中）

<label> 常用于绑定内容与表单标签关系

#一些常见标签

<textarea>提供可输入多行文本的表单控件（自动换行），关键字cols、rows规定可见宽度与行数

<a>定义超链接，href= 指定跳转网址，target控制打开方式（_self 当前网站中跳转（默认是self），_blank 在新窗口中跳转）

<footer>定义文档或文档部分区域的页脚，一般用于网页的底部布局

<br>换行单标签

<p> 定义段落，会自动在其前后创建一些空白

有语义标签：（仅了解，移动端常用）

各种input：

对于单选标签radio：name属性名，其有相同属性值的标签只能多选一，checked属性名：默认被选中的选项

文件标签：关键字multiple 上传多个文件

表单域标签form：定义按钮控制的区域等

&nbsp：表示空格

vue常见基础语法示例

<body>
    <div id ="app">
        {{message}}
    </div>
    <!--引用开发版vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new vue({
            el:"#app",
            data:{
                message:"123",
                
                school:{
                    name:""
                },
                campus:['1','2']
            }
        })
    </script>
</body>

<div id= "app">
    <!--type：对象类型，value：对象显示的文本，click表示触发形式，do为被调用的位置 -->
    <input type="button" value="事件绑定" v-on:click="do">
    <!--一个显示有food中内容”西红柿“的h2标题，当被点击时触发函数，在food后加上字并实时反馈到标题中-->
    <h2 @click="change"{{food}}></h2>
</div>
<script>
    var app=new Vue({
        el:="#app",
        data:{
            food:"西红柿"
        },

        methods:{
            do: function(){
                alert("这是一个弹窗");
            }
            change:function(){
                consle.log(this.food);
                this.food+="炒蛋";
            }

```

" V_ON："也可简化为“ @ ”

简易计数器实现

v-show方法示例

v-show与v-if区别：

v-show操作样式，而v-if直接操作dom元素。

因此出于效率考虑，对于需要频繁切换的元素，实际应用中使用v-show。

v-bind ：

语法：v-bind：属性名=属性值/表达式

可以直接简写为冒号，省略v-bind关键字

v-for：

<ul>
    <li v-for = "(item,index) in arr" >
        {{ index }}内容为:{{ item }}
    </li>
</ul>

或v-for ="item in arr"

数组增删：push、shift（移除最左边的元素）

this.list.splice(index,x)：删除自index起共x个

v-model：

双向数据绑定，（获取和设置元素的值）

div和span的区别：（都无语义）

div:（独占一行）

div是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。

Span:
span是一个内联元素，没有实际意义，它的存在纯粹是为了应用样式，给一段内容加上<span></span>标记可以通过在span上定义样式来设定其内容的样式。

# id选择器

. class选择器

axios库（网络请求库）：

weixin_64419330

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础以及html基础以及一些杂七杂八的东西

a>定义超链接，href= 指定跳转网址，target控制打开方式（_self 当前网站中跳转（默认是self），_blank 在新窗口中跳转），没有实际意义，它的存在纯粹是为了应用样式，给一段内容加上标记可以通过在span上定义样式来设定其内容的样式。对于单选标签radio：name属性名，其有相同属性值的标签只能多选一，checked属性名：默认被选中的选项。，可以包含段落，表格等内容，用于放置不同的内容。定义无序元素列表整体，用于包裹li标签。
复制链接

扫一扫