Vue基础入门一

最新推荐文章于 2023-07-13 18:24:46 发布
最新推荐文章于 2023-07-13 18:24:46 发布
阅读量400 收藏
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46122805/article/details/116173695
版权

Vue

一、简介

	Vue，一个超级强大的前端开发框架，学习这个要有html,css,js,ajax的基础知识。它是一个js框架，简化了dom操作，拥有响应式的数据驱动。
	官网地址：https://cn.vuejs.org/
	开发软件下载及使用说明：https://mp.weixin.qq.com/s/S5jfMA1X25hfC-59e7Vtcg

二、vue第一个示例

步骤：
	1、导入vue的开发依赖：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	2、创建vue的实例对象，并设置el(挂载点)属性和data（数据）属性
	3、使用模板语法将数据渲染到页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="mask">
        {{message}}
    </div>
</body>
<script>
    var app=new Vue({
        el:"#mask",
        data:{
            message:"nihao"
        }
    })
</script>
</html>

说明：
	1、上边示例的js是将vue的js下载到了本地
	2、el（挂载点)：
		（1）控制vue实例的作用范围，vue会管理el选项命中的元素以及它的子元素。上边示例的vue的作用范围就是一个div
		（2）el后边可以使用任何选择器，但是推荐id选择器
		（3）只能挂载到双标签上，到是不能用在html和body
	3、通过 {{}} 来拿取data中的数据
		（1）vue中用到的数据定义在data中
		（2）渲染复杂类型的数据时，遵循js语法即可

三、Vue的指令

指令主要用于页面各种属性的操作

1、内容绑定，事件绑定的指令

内容绑定：
	v-html:可以绑定带h5标签的内容，并将h5标签解析成页面可以使用的标签
	v-text:只能绑定普通不带h5标签的内容，带h5标签也是将标签作为字符串
事件绑定：
	v-on：绑定事件

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="mask">
<!--        属性样式的使用，会覆盖原内容-->
        <h2 v-text="message">jskfslflsjdflkdsjf</h2>
        <br>

<!--        可以拼接-->
        <h2>{{message}}啦啦啦</h2>
        <br>

<!--        v-html可以解析带h5标签的内容-->
        <h2 v-html="co"></h2>

<!--        v-on:  绑定事件,两种绑定-->
        <input type="button" value="事件绑定1" v-on:click="bb">
        <input type="button" value="事件绑定2" @click="cc">
        <input type="button" value="事件绑定3" @dblclick="cc">
        <input type="button" value="事件绑定4" v-on:mouseenter="cc">

    </div>

</body>
<script>
    var app=new Vue({
        el:"#mask",
        data:{
            message:"你要如何，我们就如何",
            co:"<a href='#'>烟花</a>"
        },
        methods:{
            //两种声明方法的方式
            bb:function () {
                alert("春天雨，夏蝉鸣");
            },
            cc(){
                alert("秋风吹，雪花轻");
            }
        }
    })
</script>
</html>

示例练习，计数器：
在这里插入图片描述

样式：


body{
  background-color: #f5f5f5;
}
#app {
  width: 480px;
  height: 80px;
  margin: 200px auto;
}
.input-num {
  margin-top:20px;
  height: 100%;
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 4px 4px 4px #adadad;
  border: 1px solid #c7c7c7;
  background-color: #c7c7c7;
}
.input-num button {
  width: 150px;
  height: 100%;
  font-size: 40px;
  color: #ad2a27;
  cursor: pointer;
  border: none;
  outline: none;
  background-color:rgba(0, 0, 0, 0);
}
.input-num span {
  height: 100%;
  font-size: 40px;
  flex: 1;
  text-align: center;
  line-height: 80px;
  font-family:auto;
  background-color: white;
}
img{
  float: right;
  margin-top: 50px;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>计数器</title>
    <link rel="stylesheet" href="./css/computer.css" />
</head>

<body>
<!-- html结构 -->
<div id="app">
    <!-- 计数器功能区域 -->
    <div class="input-num">
        <button @click="decr">
            -
        </button>
        <span>{{index}}</span>
        <button @click="incr">
            +
        </button>
    </div>
    <img src="http://qnaaa.zzaaa.net/aaajy/logo.png" alt="" />
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="./js/vue.js"></script>
<!-- 编码 -->

</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            index:0,
            //上限
            max:10,
            //下限
            min:0
        },
        methods:{
            incr(){
                //如果值大于等于最大值，就不能加了
                if(this.index>=this.max) {
                    alert("已经最大了");
                }else {
                    this.index++;
                }
            },
            decr(){
                //如果值大于等于最小值，就不能减了
                if(this.index<=this.min) {
                    alert("已经最小了");
                }else {
                    this.index--;
                }
            }
        }
    })
</script>

</html>

2、显示切换，属性绑定的指令

显示切换：
	v-show:
		1、根据表达式的真假，切换元素的显示和隐藏。
		2、指令后的内容，最终都会解析为布尔值
		3、true为显示，false为隐藏
		4、数据改变后，对应元素的显示状态会同步更新
		5、原理是改变元素的display的值
	v-if:
		1、根据表达式的真假，切换元素的显示和隐藏。操纵的是DOM元素。也就是控制dom起不起作用。
		2、表达式为true，标签元素存在于dom树中，为false,则不存在。
		3、指令后的内容，最终都会解析为布尔值
		4、频繁的切换状态，使用v-show
属性绑定：
	v-bind:
		1、设置元素的属性（src\title\class）
		2、格式：v-bing:属性名=表达式  或   ：属性名=表达式
		3、需要动态的增删class，建议使用对象的方式

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        .active{
            border: 3px red solid;
        }
    </style>
</head>
<body>
    <div id="mask">
        <input type="button" value="显或隐" @click="ftm">
        <br>
<!--        v-show  控制图片是否显示-->
        <img src="./images/00.jpg" v-show="fort" v-bind:title="imgTitle">
<!--        v-if  控制一个标签行是否起作用        v-bind  绑定是src  title   class 等属性-->
<!--        <img src="./images/01.jpg" v-if="fort" :src="imgSrc" class="active">-->
<!--        <img src="./images/01.jpg" v-if="fort" :src="imgSrc" :class="isActive?'':'active'">-->
        <img src="./images/01.jpg" v-if="fort" :src="imgSrc" :class="{active:isActive}">
    </div>
</body>
<script>
    var app=new Vue({
        el:"#mask",
        data:{
            fort:true,
            imgTitle:"大house",
            imgSrc:"./images/04.jpg",
            isActive:false
        },
        methods:{
            ftm(){
                this.fort=!this.fort;
            }
        }
    })
</script>
</html>

案例：
在这里插入图片描述

一个图片切换展示器：
	分析：
		1、创建一个数组，存储图片路径，根据数组下边拿图片
		2、左右点击时，修改src中的图片下边
		3、当第一张图片时，没有向前的按钮，当最后一张时，没有向后的按钮

样式：

* {
  margin: 0;
  padding: 0;
}

html,
body,
#mask {
  width: 100%;
  height: 100%;
}

#mask {
  background-color: #c9c9c9;
  position: relative;
}

#mask .center {
  position: absolute;
  background-color: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
}
#mask .center .title {
  position: absolute;
  display: flex;
  align-items: center;
  height: 56px;
  top: -61px;
  left: 0;
  padding: 5px;
  padding-left: 10px;
  padding-bottom: 0;
  color: rgba(175, 47, 47, 0.8);
  font-size: 26px;
  font-weight: normal;
  background-color: white;
  padding-right: 50px;
  z-index: 2;
}
#mask .center .title img {
  height: 40px;
  margin-right: 10px;
}

#mask .center .title::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 65px solid;
  border-color: transparent transparent white;
  top: -65px;
  right: -65px;
  z-index: 1;
}

#mask .center > img {
  display: block;
  width: 700px;
  height: 458px;
}

#mask .center a {
  text-decoration: none;
  width: 45px;
  height: 100px;
  position: absolute;
  top: 179px;
  vertical-align: middle;
  opacity: 0.5;
}
#mask .center a :hover {
  opacity: 0.8;
}

#mask .center .left {
  left: 15px;
  text-align: left;
  padding-right: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

#mask .center .right {
  right: 15px;
  text-align: right;
  padding-left: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>图片切换</title>
    <link rel="stylesheet" href="./css/imgaeIndex.css" />
</head>

<body>
<div id="mask">
    <div class="center">
        <h2 class="title">
            <img src="./images/logo.png" alt="">
            月球
        </h2>
        <!-- 图片 -->
<!--        src来控制数组下标-->
        <img :src="impage[index]" alt="" />
        <!-- 左箭头 -->
<!--        v-on 绑定点击事件    v-show 控制是否显示-->
        <a href="javascript:void(0)"  class="left" v-on:click="prev" v-show="index>0">
            <img src="./images/prev.png" alt="" />
        </a>
        <!-- 右箭头 -->
        <a href="javascript:void(0)" class="right" v-on:click="nx" v-show="index<impage.length-1">
            <img src="./images/next.png" alt="" />
        </a>
    </div>
</div>

<script src="./js/vue.js"></script>
</body>
<script>
    var app=new Vue({
        el:"#mask",
        data:{
           index:0,
            impage:[
                "./images/00.jpg",
                "./images/01.jpg",
                "./images/02.jpg",
                "./images/03.jpg",
                "./images/04.jpg",
                "./images/05.jpg",
                "./images/06.jpg",
                "./images/07.jpg",
                "./images/08.jpg",
                "./images/09.jpg",
                "./images/10.jpg"
            ]
        },
        methods:{
            prev(){
                this.index--;
            },
            nx(){
                this.index++;
            }
        }
    })
</script>

</html>

3、列表循环，表单元素绑定的指令

列表循环：
	v-for:
		1、根据数据生成列表结构
		2、数组经常和v-for一起使用
		3、语法：（item,index） in items      (数组中的元素，元素下标)  in   数组
		4、数组长度的更新可以同步到页面上，是响应式的 
	v-on的补充：
		1、传递自定的参数，也就是方法定义形参，中可以传递实际参数
		2、事件修饰符：事件后跟上 .修饰符  ，修饰符有多种
				<input type="text" @keyup.enter="方法名"/>    限定enter触发方法
	v-model:
		1、获取和设置表单元素的值（双向数据绑定）
		2、绑定的数据会和表单元素值相关联

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="mask">
        <ul>
            <li v-for="(item,index) in namear" :title="item">{{index}}---->{{item}}</li>
        </ul>
        <h2>=============================</h2>
        <ul>
            <li v-for="(item,index) in objArr" :title="item">{{index}}---->{{item.name}}</li>
        </ul>
        <h2>==================================================</h2>
        <p1>{{count}}</p1>
<!--        方法传参-->
        <input type="button" value="jia" @click="dolt(1,2)">
        <h2>===================================================</h2>
<!--        v-model :给表单元素绑定元素，双向绑定  -->
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>
<script>
    var app=new Vue({
        el:"#mask",
        data:{
            namear:["aa","bb","cc"],
            objArr:[
                {name:"hhh"},
                {name:"lll"}
            ],
            count:0,
            message:"sdfsdfsljf"
        },
        methods:{
            dolt:function (p1,p2) {
                this.count=p1+p2;
            }
        }
    })
</script>
</html>

练习：记事本
样式：

html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: #fff;
}
button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 100%;
  vertical-align: baseline;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.4em;
  background: #f5f5f5;
  color: #4d4d4d;
  min-width: 230px;
  max-width: 550px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
}

:focus {
  outline: 0;
}

.hidden {
  display: none;
}

#todoapp {
  background: #fff;
  margin: 180px 0 40px 0;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

#todoapp input::-webkit-input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

#todoapp input::-moz-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

#todoapp input::input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: gray;
}

#todoapp h1 {
  position: absolute;
  top: -160px;
  width: 100%;
  font-size: 60px;
  font-weight: 100;
  text-align: center;
  color: rgba(175, 47, 47, .8);
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
}

.new-todo,
.edit {
  position: relative;
  margin: 0;
  width: 100%;
  font-size: 24px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  border: 0;
  color: inherit;
  padding: 6px;
  border: 1px solid #999;
  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.new-todo {
  padding: 16px;
  border: none;
  background: rgba(0, 0, 0, 0.003);
  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}

.main {
  position: relative;
  z-index: 2;
  border-top: 1px solid #e6e6e6;
}

.toggle-all {
  width: 1px;
  height: 1px;
  border: none; /* Mobile Safari */
  opacity: 0;
  position: absolute;
  right: 100%;
  bottom: 100%;
}

.toggle-all + label {
  width: 60px;
  height: 34px;
  font-size: 0;
  position: absolute;
  top: -52px;
  left: -13px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.toggle-all + label:before {
  content: "❯";
  font-size: 22px;
  color: #e6e6e6;
  padding: 10px 27px 10px 27px;
}

.toggle-all:checked + label:before {
  color: #737373;
}

.todo-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 420px;
  overflow: auto;
}

.todo-list li {
  position: relative;
  font-size: 24px;
  border-bottom: 1px solid #ededed;
  height: 60px;
  box-sizing: border-box;
}

.todo-list li:last-child {
  border-bottom: none;
}

.todo-list .view .index {
  position: absolute;
  color: gray;
  left: 10px;
  top: 20px;
  font-size: 16px;
}

.todo-list li .toggle {
  text-align: center;
  width: 40px;
  /* auto, since non-WebKit browsers doesn't support input styling */
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  border: none; /* Mobile Safari */
  -webkit-appearance: none;
  appearance: none;
}

.todo-list li .toggle {
  opacity: 0;
}

.todo-list li .toggle + label {
  /*
		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
	*/
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center left;
}

.todo-list li .toggle:checked + label {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
}

.todo-list li label {
  word-break: break-all;
  padding: 15px 15px 15px 60px;
  display: block;
  line-height: 1.2;
  transition: color 0.4s;
}

.todo-list li.completed label {
  color: #d9d9d9;
  text-decoration: line-through;
}

.todo-list li .destroy {
  display: none;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 40px;
  height: 40px;
  margin: auto 0;
  font-size: 30px;
  color: #cc9a9a;
  margin-bottom: 11px;
  transition: color 0.2s ease-out;
}

.todo-list li .destroy:hover {
  color: #af5b5e;
}

.todo-list li .destroy:after {
  content: "×";
}

.todo-list li:hover .destroy {
  display: block;
}

.todo-list li .edit {
  display: none;
}

.todo-list li.editing:last-child {
  margin-bottom: -1px;
}

.footer {
  color: #777;
  padding: 10px 15px;
  height: 20px;
  text-align: center;
  border-top: 1px solid #e6e6e6;
}

.footer:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
    0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
    0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

.todo-count {
  float: left;
  text-align: left;
}

.todo-count strong {
  font-weight: 300;
}

.filters {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  right: 0;
  left: 0;
}

.filters li {
  display: inline;
}

.filters li a {
  color: inherit;
  margin: 3px;
  padding: 3px 7px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

.filters li a:hover {
  border-color: rgba(175, 47, 47, 0.1);
}

.filters li a.selected {
  border-color: rgba(175, 47, 47, 0.2);
}

.clear-completed,
html .clear-completed:active {
  float: right;
  position: relative;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}

.clear-completed:hover {
  text-decoration: underline;
}

.info {
  margin: 50px auto 0;
  color: #bfbfbf;
  font-size: 15px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-align: center;
}

.info p {
  line-height: 1;
}

.info a {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}

.info a:hover {
  text-decoration: underline;
}

/*
	Hack to remove background from Mobile Safari.
	Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .toggle-all,
  .todo-list li .toggle {
    background: none;
  }

  .todo-list li .toggle {
    height: 40px;
  }
}

@media (max-width: 430px) {
  .footer {
    height: 50px;
  }

  .filters {
    bottom: 10px;
  }
}

页面：

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>小黑记事本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="googlebot" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="./css/Bookindex.css" />
    <link rel="stylesheet" href="css/Bookindex.css">
  </head>

  <body>
    <!-- 主体区域 -->
    <section id="todoapp">
      <!-- 输入框 -->
      <header class="header">
        <h1>小黑记事本</h1>
        <input
          autofocus="autofocus"
          autocomplete="off"
          placeholder="请输入任务"
          class="new-todo"
          v-model="context"
          @keyup.enter="addContext"
        />
      </header>
      <!-- 列表区域 -->
      <section class="main">
        <ul class="todo-list">
          <li class="todo" v-for="(item,index) in items">
            <div class="view">
              <span class="index">{{index+1}}.</span> <label>{{item}}</label>
              <button class="destroy" @click="removeItem(index)"></button>
            </div>
          </li>
        </ul>
      </section>
      <!-- 统计和清空 -->
      <footer class="footer" v-show="items.length>0">
        <span class="todo-count"> <strong>{{items.length}}</strong> items left </span>
        <button class="clear-completed" @click="clear">
          Clear
        </button>
      </footer>
    </section>
    <!-- 底部 -->
    <footer class="info">
      <p>
        <a href="http://www.baidu.com"
          ><img src="./img/logo.png" alt=""
        /></a>
      </p>
    </footer>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="./js/vue.js"></script>
    <script>
        var app=new Vue({
              el:"#todoapp",
              data:{
                  //声明一个数组
                  items:["吃饭饭","睡觉觉","打豆豆"],
                  context:"好好学习,天天向上"
              },
              methods:{
                //1.添加
                addContext(){
                     this.items.push(this.context)
                },
                //2.删除
                removeItem(index){
                     this.items.splice(index,1);
                },
                3.清空
                clear(){
                    this.items=[]
                },
              }
        })
    </script>
  </body>
</html>
冯小鸟的探戈
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue的第一个实例
weixin_52705712的博客
07-27 92
其中，双{{ }}里不单单可以写vue实例中data的值（key），也可以写js表达式，如：
第一个vue实例
实践求真知
10-24 297
一官网 https://cn.vuejs.org/v2/guide/ 二index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue入门</title> <script src="https:/...
vue入门示例（一）
热门推荐
heroking
08-21 3万+
为了让广大后端人员更快的理解上手vue，我们先不适用ide和vue-cli等工具，先采用手动引入js的方式，从一个最简单的例子开始，循序渐进 1. 到官网下下vue.js vue官网 我们这里使用开发版，它包含了许多警告提示信息 新建一个文件夹把vue.js放进去，然后创建一个html文件命名为index.html 2. 第一个hello world 编辑index的内容 <!DOCT...
创建第一个Vue实例
m0_47761892的博客
01-28 231
创建第一个Vue实例
Vue的第一个实例+解释
quietbxj的博客
08-01 116
Vue是一个js框架，简化了DOM的操作，使用响应式数据驱动。入门代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>VUE_DEMO</title>
vue基础知识-菜鸟入门
01-03
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。...通过深入理解和熟练掌握这些Vue基础知识，开发者能够构建出功能丰富、性能优秀的Web应用。不断学习和实践，是提升Vue技能的关键。
Vue基础入门源码-03
05-16
这个“Vue基础入门源码-03”的资源很可能是对前面学习内容的深入，可能涵盖上述一个或多个知识点的实践代码示例。通过阅读和理解这些源码，你可以更好地掌握Vue.js的基础知识，为进阶学习打下坚实基础。
Vue基础入门源码-02
05-11
在"Vue基础入门源码-02"这个资源中，我们可以期待学习到关于Vue的基础知识，包括但不限于以下几个方面： 1. **安装与设置**：Vue可以通过CDN链接直接引入，或者使用npm进行本地安装。在源码中，可能会展示如何在...
vue基础入门源码-01
05-10
在这个"vue基础入门源码-01"的资源中，我们可以期待学习到Vue.js的基础概念和核心用法。下面将详细介绍一些关键知识点： 1. **安装与设置**：首先，会介绍如何通过npm或CDN引入Vue.js到项目中，以及如何在HTML文件...
vue基础入门&demo.zip
最新发布
02-18
"vue基础入门&demo.zip"这个压缩包很可能是为了帮助初学者快速入门Vue.js而准备的资源，其中包含了文档和可能的示例代码。 在“vue基础入门&demo.docx”这份文档中，我们可以预期找到关于Vue.js的基础知识，例如： ...
VUE通用后台管理系统（一）登录
qq_45600228的博客
07-13 7276
VUE通用后台管理系统（一）
我的第一个Vue程序
Lovnx
07-09 3271
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
第一个Vue实例
Woo_home的博客
06-01 631
Vue 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。（来源百度百科） 特点 易用 已经会了HTML,CSS,JavaScript 就可以 灵活 简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。 性能 20kb min+gzip 运行大小、超快虚拟 DOM ...
Vue基础语法：属性绑定、事件绑定、表单控件、计算属性
洪布斯的博客
12-03 1299
1、属性绑定 <style> .color { color: red; } .ftred { color: red; font-size: 22px; } </style> 属性绑定指令v-bind，可以简写为...
vue实现鼠标划过时元素显隐
yangqii的博客
11-25 3398
vue中鼠标划过监听事件：mouseover、mouseout、mousemove、mouseenter、mouseleave 一、传统（类似于js/jq）方式，获取元素dom信息，修改style 示例： <ul> <li class="" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)"> </li> </ul> methods:{
vue基础的五个常用指令
weixin_60524655的博客
05-21 1208
目录 1. 内容渲染指令 2.属性绑定指令 3.事件绑定指令 4. 双向绑定指令 5.条件渲染指令 1. 内容渲染指令 1. v-text 指令用来获取数据然后以文本的形式渲染到指定标签内部，但是 v-text 也有缺点，就是它会覆盖元素内部原有的内容。所以我们开发中一般用 {{ }} 插值表达式。 2. {{ }}插值表达式，在实际开发中用的的最多，因为它只是内容的占位符，不会覆盖原有的内容。 3. v-html 指令用来...
vue如何通过opacity控制导航栏的动态显隐或其他样式的动画显隐效果
YodgeGGG的博客
12-06 1724
如何通过opacity控制导航栏的动态显隐或其他样式的动画显隐效果 话不多说，先上图 这里两个导航栏分别是不同的组件（我使用的是Vue），但样式原理是一样的，可以用vuex或是父子组件传值的方式来控制v-show的true或false，在点击全屏按钮时，顶部导航栏会向父组件传递一个事件，在父组件进行监听，随后根组件会动态的向两个子组件（两个导航栏）派发当前v-show的值，之后我们通过settimeout函数令v-show这一事件做延迟处理，先让导航栏的opacity即透明度进行一个变化，待透明度完全变为
Vue入门
m0_54407467的博客
07-01 88
一 Vue基础 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> &...
vue 使用html自带title属性 鼠标悬浮展示内容 修改其样式
tendernessxy的博客
08-26 1537
公共样式 css-common-common.css文件下 .listbox, .listboxs { // 最外层容器 用来包裹需要展示 title 属性的 .title[data-title] { // data-title 在我们需要加title属性的标签内 换成 data-title='张三' position: relative; // 样式： &:hover:after { opacity: 1; transition:
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值