vue学习整理

listTong

已于 2022-05-16 15:04:17 修改

阅读量254

点赞数

文章标签： vue.js 学习 javascript

于 2022-05-16 14:24:58 首次发布

本文链接：https://blog.csdn.net/t520wutong/article/details/124798239

版权

官方文档
Script:引用脚本
<scriptsrc=“https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js”>
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”语法 (双大括号) 的文本插值：
<span>Message: {{ msg }}</span> msg property（属性）发生了改变，插值处的内容都更新
<span v-once>这个将不会改变: {{ msg }}</span>
原始THML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-

html 指令

<p>Using mustaches: {{ rawHtml }}</p>
<p> Using v-html directive:<span v-html = "rawHtml"> </Span></p>
Attribute
Mustache 语法不能作用在 HTML attribute 上，遇这种情况应该使用 v-bind 指令：
<div v-bind:id="dynamicId"></div>
若isButtonDisabled （禁用按钮）的值是 null、undefined（未定义）或 false，则 disabled （禁用）attribute 甚至不会被包含在渲染出来的元素中。

JavaScript表达式：

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

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

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：
<p v-if="seen">现在你看到我了</p>
这里，v-if 指令将根据表达式 seen 的值的真假来插入/（或者）移除

元素。

参数

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

动态参数

{ attributeName（属性名）eventName（事件名）}
<a v-bind:[attributeName]=“url”> …
这里的 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()：
<form v-on:submit.prevent="onSubmit">...</form>
缩写
v-bind 缩写
<a v-bind:href="url">...</a>
<a :href="url">...</a>
<a :[key]="url"> ... </a>
v-on 缩写
<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>

<a @[event]="doSomething"> ... </a>

计算属性和监听器

侦听器：

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="catch-example">
    
<p>Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{answer}}</p>
</div>
<!--因为AJAX库和通用工具的生态已经相当丰富，Vue核心代码没有重复-->
<!--提供这些功能以保持精简。这也可以让你自由选组更熟悉的工具-->
<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>

条件渲染

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no </h1>
在元素上使用 v-if 或v-for条件渲染分组（使用）

<template v-if="ok">        
  <h1>Title</h1>       
 <p>Paragraph 1</p>    
 <p>Paragraph 2</p>     
</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>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>

<template v-else>
<label>Email</label>
<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事件需求
阻止单击事件继续传播
<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>
点击事件将只会触发一次
<a v-on:click.once="doThis"></a>
.once 修饰符还能被用到自定义的组件事件上
滚动事件的默认行为 (即滚动行为) 将会立即触发
而不会等待 onScroll 完成
这其中包含 event.preventDefault() 的情况
<div v-on:scroll.passive="onScroll">...</div>
.passive 修饰符尤其能够提升移动端的性能。
注意：不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

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

按键修饰符

只有在 key 是 Enter 时调用 vm.submit（） <input v-on:keyup.enter="submit">
可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
<input v-on:keyup.page-down="onPageDown">
在上述示例中，处理函数只会在 $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
例如：

<input v-on:keyup.alt.67="clear">

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

exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
使 Alt 或 Shift 被一同按下时也会触发
<button v-on:click.ctrl="onClick">A</button>
有且只有 Ctrl 被按下的时候才触发
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
没有任何系统修饰符被按下的时候才触发
<button v-on:click.exact="onClick">A</button>

鼠标按钮修饰符

• .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 来代替。

<!--    单行文本-->
    <input v-model="message" placeholder="编辑">
    <p>Message is（消息是）:{{message}}</p>
Data：message：’’

<!--多行文本-->
 <textarea v-model="message" placeholder="文本"></textarea>
    <br>
    <span>Multiline message is（多行文本是）:</span>
    <p style="white-space:pre-line;">{{message}}</p>
Data：message：’’

<!--    单个复选框-->
 <input type="checkbox" id="checkbox" v-model="checkbox">
//type:类型，checkbox：复选框，id：可改
    <label for="checkbox">{{checkbox}}</label>
Data：Checkbox：true

<!--多个复选框-->
    <input type=checkbox id=jack value=小米 v-model="checkedNames">
    <label for=jack>Jack</label>
    <input type="checkbox" id="john" value=校花 v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value=喜欢 v-model="checkedNames">
    <label for="mike">Mike</label>
<br>
<span>Checked names(选中的名字): {{ checkedNames }}</span>
Data：checkedNames：[]

<!--    单个选择按钮-->
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
Data:picked:’’

<!--    单选选择框-->
    <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
    <span>Selected: {{ selected }}</span>
Data: selected:’’

<!--    多选时绑定一个数组-->
    <select v-model="selected1" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
</select>
    <br>
    <span>Selected: {{ selected1 }}</span>
Data:selected1 :’’或者[]

  <!--    用v-for渲染动态选项-->
    <select v-model="selected2">
    <option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
    </option>
</select>
    <span>Selected: {{ selected2 }}</span>
Data:selected2:’A’,
options: [
    { text: 'One', value: 'A' },
    { text: 'Two', value: 'B' },
    { text: 'Three', value: 'C' }
]

单选按钮
<input type="radio" v-model="pick" v-bind:value="a">
当选中时
vm.pick === vm.a
选择框的选项

<select v-model="selected">
    <!-- 内联对象字面量 -->
  <option v-bind:value="{ number:123 }">123
</option> </select>

// 当选中时
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.vue
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue
Props设置命名

props: {
  greetingText: String}
<WelcomeMessage greeting-text="hi"/>

listTong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习整理

vue简单概括
复制链接

扫一扫