vue html总结

最新推荐文章于 2024-03-28 09:57:41 发布

qq_45000214

最新推荐文章于 2024-03-28 09:57:41 发布

阅读量179

点赞数

文章标签： vue html里面的使用基础vue

本文链接：https://blog.csdn.net/qq_45000214/article/details/102768920

版权

                                        vue知识总结

最近系统的学习了vue，现在做一个vue的总结。

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

你要先创建一个 .html 文件，然后通过如下方式引入 Vue：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

之后使用vue渲染


<div id="app">

  {{ message }}

</div>
<script>
var app = new Vue({

  el: '#app',

  data: {

    message: 'Hello Vue!'

  }

})
</script>

el就是Vue实例挂载的元素节点，值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML 元素的函数。
data就是数据的存放位置
{{}}
可以理解为可执行简单js 解析data数据地方
v-text
把data 数据显示出来
v-html
把data数据显示出来（解析html字符串）
v-bind:属性
绑定html标签属性
v-bind:title = “ti” 简写方式为 :属性 :title = “ti”

条件渲染

v-show=“表达式”
当表达式为真显示内容，为假不显示内容
2.v-if=“表达式”

<p v-if="true">现在你看到我了</p>

当表达式为真显示内容，为假不显示内容
3.v-show 通过css方式隐藏显示元素
v-if 通过移除html标签显示隐藏
4.v-else
列表渲染

 <p v-for=“（item,index）in list” :key="index">{{item}} --{{index}}<p>

循环显示列表元素
事件绑定
v-on:事件名称
@:事件名称
v-on:click=“show”
@click=“show”
事件写一个相对应的方法

事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突：

<!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>Vue 模板语法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
      <h1>表单绑定</h1>

      <input type="text" v-model="msg">'
      <p>{{msg}}</p>
      <input type="checkbox" v-model="flag"> 同意我们的条款<br>
      <button :disabled="!flag">登录</button>
      <p>{{flag}}</p>
      <hr>
      性别 : <input type="radio" value="男" v-model="gender" name="gender">男
            <input type="radio" value="女" v-model="gender"  name="gender"> 女
            <input type="radio" value="保密" v-model="gender"  name="gender"> 保密
        <p>{{gender}}</p>
      爱好： <input type="checkbox" value="看书" v-model="fav" name="fav2"> 看书
            <input type="checkbox" value="听歌" v-model="fav" name="fav2"> 听歌
            <input type="checkbox" value="看电影" v-model="fav" name="fav2"> 看电影
        <p>{{fav}}</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{  
                 msg:"你好vue",  
                 flag:false,
                 gender:"男",
                 fav:[]
            },
            methods: {
               
            },
           
         })

    </script> 
</body>
</html>

实列属性
el：
vue模板范围
data
vue的数据存放中心
methods
vue存放方法中心
computed
定义：从现有数据计算出新的数据
computed:{
olist(){return this.list.filter(item=>item.age>18)}
}
watch
定义:时时检测一个数据的变化-只要数据发送任何改变都能检测
watch:{
“检测的数据名”:{
handler:function(nval,oval){ //数据变化时的操作}
}
}
created
数据在模板里渲染完毕，组件创建完毕回调函数
directives 指令
定义：能让我们获取当前指令所在的html元素
模式
inserted
bind
updated
默认 bind 和updated
myfocus:function(el,obj){
// el指令所在html标签
// obj.value 指令的值
}
调用 v-myfocus=“flag”

vue动画
transition
动画指令
name 动画的名称
mode
动画模式
先进还是先出
in-out
out-in
enter-active-class
进入时候调用类名
leave-active-class
离开的时调用的类名
transition-group
动画组指令
定义
在动画指令里面，如果有元素的显示或者隐藏会自动添加相对应的类名
动画组-需要指定 :key
默认class名
v-enter-active
进入过程
v-enter
进入初始状态
v-enter-to
进入结束状态
v-leave-active
离开的过程
v-leave
离开初始状态
v-leave-to
离开结束状态

组件

定义
let child = {template:<div>...</div>}
注册
components:{child}
3.使用
当html标签

vuehtml知识总结

qq_45000214

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue html总结

vue知识总结最近系统的学习了vue，现在做一个vue的总结。Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。你要先创建一个 .ht...
复制链接

扫一扫