投稿
  1. 首页
  2. html-js-css

vue学习整理

code • 2022-5-18 • html-js-css • 阅读 14

vue学习整理,第1张

官方文档
Script:引用脚本

Type：类型
（选项/dom）
el：
类型：string | Element
制：只在用 new 创建实例时生效
attribute ：(指令)
指令带有前缀 v-
Vue 可以插入/更新/移除元素时自动应用过渡效果。
v-for 指令可以绑定数组的数据来渲染一个项目列表
v-on 指令：添加一个事件监听器
v-model 指令，能轻松实现表单输入和应用状态之间的双向绑定
v-bind 指令，将待办项传到循环输出的每个组件中
多组件（例子）：

<div id="app"> 
<app-nav>app-nav> 
<app-view>
<app-sidebar>app-sidebar> 
<app-content>app-content> 
app-view> 
div>

设置初始值：

data: { 
newTodoText: '',
 visitCount: 0,
 hideCompletedTodos: false, 
todos: [], 
error: null 
}

Object.freeze()，这会阻止修改现有的 property（属性），也意味着响应系统无法再追踪变化。

Watch：观察变量
用法：
vm.$ watch(‘a’,function(newVal,oldVal){
Console.log(newVal,newVal);
})
Vm.$data.a=”text…”

beforeCreate:在实例初始化之后，数据观测
模板语法
插值
文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
Message: {{ msg }} msg property（属性） 发生了改变，插值处的内容都更新
这个将不会改变: {{ msg }}
原始THML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-

html 指令

Using mustaches: {{ rawHtml }}


Using v-html directive:


Attribute
Mustache 语法不能作用在 HTML attribute 上，遇这种情况应该使用 v-bind 指令：

若isButtonDisabled （禁用按钮）的值是 null、undefined（未定义） 或 false，则 disabled （禁用）attribute 甚至不会被包含在渲染出来的 元素中。

JavaScript表达式：

{{ number + 1 }} 每个绑定都只能包含单个表达式
{{ ok ? ‘YES’ : ‘NO’ }}
{{ message.split(‘’).reverse().join(‘’) }}


这是语句，不是表达式
{{ var a = 1 }}
流控制也不会生效，请使用三元表达式
{{ if (ok) { return message } }}
模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：

现在你看到我了


这里，v-if 指令将根据表达式 seen 的值的真假来插入/（或者）移除

元素。

参数

...
在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：
...

动态参数

{ attributeName（属性名）eventName（事件名）}
…
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 “href”，那么这个绑定将等价于 v-bind:href。当 eventName 的值为 “focus” 时，v-on:[eventName] 将等价于 v-on:focus
对动态参数表达式的约束
某些字符，如空格和引号，放在 HTML attribute 名里是无效的，在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写。

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用event.preventDefault()：

缩写
v-bind 缩写
...
...
...
v-on 缩写
...
...

...

计算属性和监听器

侦听器：

DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="catch-example">
    
<p>Ask a yes/no question:
    <input v-model="question">
  p>
  <p>{{answer}}p>
div>


<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js">script>
<script>
  var watchExampleVM= new Vue({
    el:'#catch-example',
    data:{
      question:'',
      answer:'I cannot give you an answer until you ask a question!'
    },
    watch:{
      //如果‘question'发生改变，这个函数就会运行
      question:function(newQuestion,olQuestion){
        this.answer='Waiting for you to  stop typing...'
        this.debouncedGetAnswer()
      }
    },
    created:function(){
      //'_.debounce'是一个通过Lodash限制操作频率的函数。
      //正在这个例子中，我们希望限制访问yesno.wtf/api的频率。
      //AJAX请求直接到用户输入完毕才会发出。想要了解更多关于
      //_.debounce'函数（及其近亲'_.throttle)d 知识，
      //请参考：https://Lodash.com/docs#debounce
      this.debouncedGetAnswer=_.debounce(this.getAnswer,3000)
    },
    methods:{
      getAnswer:function(){
        if(this.question.indexOf('?')===-1){
          this.answer='Questions ussally contain a qusetion mark.;-'
          return
        }
        this.answer='Thinking...'
        var vm=this
        axios.get('https://yesno.wtf/api')
        .then(function(response){
          vm.answer=_.capitalize(response.data.answer)
        })
        .catch(function(error){
          vm.answer='Error!Could not reach the API.'+error
        })
      }
    }
  })
    script>
  body>
html>
条件渲染

Vue is awesome!
Oh no
在  元素上使用 v-if 或v-for条件渲染分组（使用）

<template v-if="ok">        
  <h1>Titleh1>       
 <p>Paragraph 1p>    
 <p>Paragraph 2p>     
template>

<ul>
<template v-for="item in items">
 <li>{{ item.msg }}li>
 <li class="divider" role="presentation">li>
 template>
ul>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
Key

<template v-if="loginType === 'username'">
<label>Usernamelabel>
<input placeholder="Enter your username" key="username-input">
template>

<template v-else>
<label>Emaillabel>
<input placeholder="Enter your email address" key="email-input">
template>
v-show

v-show 不支持 元素，也不支持 v-else。
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
（不推荐）当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级
当在组件上使用 v-for 时，key 现在是必须的
任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域

事件处理

v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
v-on 还可以接收一个需要调用的方法名称。

在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 常见需求
但不能处理DOM事件需求
阻止单击事件继续传播

提交事件不再重载页面

修饰符可以串联

只有修饰符

添加事件监听器时使用事件捕获模式
即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
...
只当在 event.target 是当前元素自身时触发处理函数 , 即事件不是从内部元素触发的
...
点击事件将只会触发一次

.once 修饰符还能被用到自定义的组件事件上
滚动事件的默认行为 (即滚动行为) 将会立即触发
而不会等待 onScroll 完成
这其中包含 event.preventDefault() 的情况
...
.passive 修饰符尤其能够提升移动端的性能。
注意： 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

按键修饰符

只有在 key 是 Enter 时调用 vm.submit（）
可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。#按键码
，Vue 提供了绝大多数常用的按键码的别名：
• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right
还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
系统修饰符
• .ctrl
• .alt
• .shift
• .meta
例如：



Do something
请注意: 修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
使 Alt 或 Shift 被一同按下时也会触发

有且只有 Ctrl 被按下的时候才触发

没有任何系统修饰符被按下的时候才触发

鼠标按钮修饰符

• .left
• .right
• .middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。
.lazy
添加 lazy 修饰符，可以在 change 事件_之后_进行同步：
.number
自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

表单输入绑定

v-model 指令在表单 及
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素 。
v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值 将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组的 data 选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

{{text}}) 并不会生效，应用 v-model 来代替。 

    
    
Message is（消息是）:{{message}}

Data：message：’’


 
    

    Multiline message is（多行文本是）:
    
{{message}}

Data：message：’’


 
//type:类型，checkbox：复选框，id：可改
    
Data：Checkbox：true


    
    
    
    
    
    


Checked names(选中的名字): {{ checkedNames }}
Data：checkedNames：[]










Picked: {{ picked }}
Data:picked:’’


    
    Selected: {{ selected }}
Data: selected:’’


    
    

    Selected: {{ selected1 }}
Data:selected1 :’’或者[]

  
    
    Selected: {{ selected2 }}
Data:selected2:’A’,
options: [
    { text: 'One', value: 'A' },
    { text: 'Two', value: 'B' },
    { text: 'Three', value: 'C' }
]

单选按钮

当选中时
vm.pick === vm.a
选择框的选项

// 当选中时
typeof vm.selected // => ‘object’
vm.selected.number // => 123

组件

应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V，例：
components/
|- BaseButton.vue（AppButton.vue/VBbutton.vue）
|- AppTable.vue(…)
|- VIcon.vue(…)
只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。
与父组件书写：

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vuecomponents/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue
Props设置命名 
props: {
  greetingText: String}

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/943603.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
code code 管理员组
0 0
上一篇 2022-05-18
下一篇 2022-05-18

发表评论

登录后才能评论

评论列表（0条）

保存