vue基础

最新推荐文章于 2024-06-16 12:11:30 发布

ALotOfHoles

最新推荐文章于 2024-06-16 12:11:30 发布

阅读量233

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/ALotOfHoles/article/details/121085200

版权

vue基础

vue简介
hello vue
指令

vue简介

Vue.js的定位是一个渐进式框架前端三大mvvm框架 vue , react ,angular
Vue.js受到越来越多关注的一个重要原因：你只需要具备基本的HTML/JavaScript/CSS 基础，就可以快速上手，让你用上这些现代Web开发中的先进技术来提高你的生产力：
vue官网
与Angular和React出自巨型公司不同，Vue.js基本上是以作者（尤雨溪/Evan YOU）
尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，现任职于纽约Google Creative Lab。

2014年2月，开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 库，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统

2016年9月3日，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入 Weex 团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端

hello vue

引入vue.js库
<script src="vue.js"></script>
创建vue实例
<script> new Vue({ el：'#app', data: {msg:'Hello,Vue.js 2'} }) </script>
完整html导入

<div id="app">
   hello Vue!
</div>

完整的helloWorld代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            }
        })
    </script>
</body>
</html>

指令

文本

数据绑定最常见的形式就是使用{{}}语法 (双大括号)
<span> {{message}}</span>
也可以使用v-text方法
<span v-text="message"></span>

html文本

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html

<div id="app">
       <div v-html="rawMsg"></div>
   </div>
   <script type="text/javascript">
       var app=new Vue({
           el:'#app',
           data:{
               message:'hello Vue!',
               rawMsg:'<h1>你好vue</h1>'
           }
       })
   </script>

属性

给html标签绑定一个属性值应该使用 v-bind:属性名称

以下代码给h1绑定一个新的id和title属性

<div id="app">
  <h1 v-bind:id="dyId" v-bind:title="dyTitle">我是一行快乐的标题</h1>
</div>
 <script type="text/javascript">
     var app=new Vue({
         el:'#app',
         data:{
             dyId:'best',
             dyTitle:'看见我的人一生平安'
         }
     })
 </script>

渲染结果是：
<h1 id="best" title="看见我的人一生平安">我是一行快乐的标题</h1>
绑定属性也是可以直接简写：
<h1 :id="dyId" :title="dyTitle">我是一行快乐的标题</h1>

条件

v-show
css方式隐藏
v-if
v-else-if
v-else
频繁切换建议使用v-show
一次性建议v-if
v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。

列表渲染

v-for="item in list"

// list 要遍历的数组
// item 当前遍历的项目
v-for="(item,index) in list"
// index 当前遍历项的索引从0开始
使用v-for务必给值
v-bind:key=""
:key="值“
值必须唯一
添加key属性可以优化v-for的渲染
让vue更好识别当前渲染的节点
特别是在排序，过滤等操作的时候

不建议key的值使用循环的索引

事件指令

v-on:事件类型+“响应函数”
v-on:click="say()"
	@click="say()"
事件的简写
	@click="num++"

行内事件响应

事件修饰符
.stop阻止时间冒泡
.prevent阻止默认事件
.once只执行一次

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
 
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
 
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
  
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

事件的修饰符可以同时写多个
@click.stop.once.prevent=“num++”

按键修饰符

.up
.down
.left
.right
.delete
.enter
.space
.esc
事件对象
$event

表单绑定

v-model
让表单的值与数据绑定在一起
<input type="checkbox">
默认选中是true
不选中时false
<input type="checkbox" name="fruit" v-model="list">
如果是多个把选中的值添加到list数组中
修饰符
.number 数字
.trim 移除两端空白

类绑定

1.属性
:class=“值”
2.对象
当对象的属性值为真，该属性作为class绑定
:class=“{‘key1’:true,'key2':false}”
key1的值为真，key1会被绑定key2不会
3.数组方式
:class=“[c1,c2,c3]”

样式绑定

属性名去掉 - 下个字母大写

:style="{color:'red','fontSize':'48px'}"

ALotOfHoles

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础

vue基础vue简介vue简介Vue.js的定位是一个渐进式框架前端三大mvvm框架 vue , react ,angularVue.js受到越来越多关注的一个重要原因：你只需要具备基本的HTML/JavaScript/CSS 基础，就可以快速上手，让你用上这些现代Web开发中的先进技术来提高你的生产力：...
复制链接

扫一扫