vue入门

最新推荐文章于 2023-06-27 21:05:52 发布

w_cyj

最新推荐文章于 2023-06-27 21:05:52 发布

阅读量187

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/w_cyj/article/details/108680650

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是vue

一套用于构建用户界面的渐进式框架
Vue 被设计为可以自底向上逐层应用
Vue的核心只关心视图层
直接在浏览器打开：
- npx http server
- npm i browser-sync 下载
- brower-sync start -s -f */ --directory -w 监听
- brower-sync(npm,yarn):是node.js 的一个模块

引入vue.js

直接在官网下载js文件，然后引入

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

note

camelCase(withRouter) 小驼峰命名
parsecalCase(WithRouter) 大驼峰命名
kebab-case(with-route) 连接符命名

模板渲染语法 template

closest jQery中找到最近的符合条件的祖先元素，包括它自己
attr:DOM属性拿到DOM属性后才能操作
prop:HTML属性
在定义属性时尽量使用kebab-case或者全小写
你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

使用JS表达式

{{}}：插值表达式
- {{1}}：数值表达式
- {{true}} 布尔表达式
- {{‘hello’}} 字符串表达式
- {{1+1}}
- {{true ? ‘a’ : ‘b’}} 三目运算符
- 短路运算符
  - {{true || ‘a’}} true
  - {{true && ‘a’}} a
- {{foo()}} 函数表达式
- {{isShow ? ‘show’ : ‘hidden’}}
- 正则表达式
- {{(function(){})()}} 自执行函数,立即执行

指令 directive

方便渲染东西执行特殊语义化
指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute

v-on指令添加一个事件监听器，缩写为@

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>


var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
   // 翻转信息
   }
  }
})

v-for指令可以绑定数组的数据来渲染一个项目列表（遍历）

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

v-model指令，它能轻松实现表单输入和应用状态之间的双向绑定

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

v-bind 指令：动态的绑定一个或者多个attribute,或一个组件prop到表达式，可以缩写为：
v-text指令，更新元素的文本内容
v-html指令：更新元素的innerHTML
- 注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代
- 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
- 在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局 <style> 元素手动设置类似 BEM 的作用域策略。
v-show指令：根据表达式之真假值，切换元素的 display CSS property。当条件变化时该指令触发过渡效果。
v-if 指令：
- 根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。
- 当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。
v-else 指令：不需要表达式，前一兄弟元素必须有 v-if 或 v-else-if
v-else-if指令：不需要表达式，前一兄弟元素必须有 v-if 或 v-else-if
v-slot 指令：提供具名插槽或需要接收 prop 的插槽。缩写#
v-pre指令：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。不需要表达式
v-once指令：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
v-cloak指令：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
```
[v-cloak] {
  display: none;
}

或
<div v-cloak>
  {{ message }}
</div>
不会显示，直到编译结束。
```
note
- v-for 优先级高于v-if
- delete不具有响应特性
- this.obj是一个引用，没有赋予新的对象，只是改变了obj的某个值，不会渲染
- 展开运算符 … const obj={ x:0,y:1} const obj2={ …obj,z:3} 把obj展开到obj2中，并加了一个新的属性

Vue实例

创建一个Vue实例
```
var vm = new Vue({
 
})
```
将 data 对象中的所有的 property 加入到 Vue 的响应式系统中
- 当 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值
- 只有当实例被创建时就已经存在于 data 中的 property 才是响应式的
- 使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。
```
var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

<div id="app">
  <p>{{ foo }}</p>
  
  <button v-on:click="foo = 'baz'">Change it</button>
</div>
```

组件

一个组件本质上是一个拥有预定义选项的一个 Vue 实例

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  props:['todo']
  // todo-item 组件接受一个"prop"，类似于一个自定义 attribute。这个 prop 名为 todo
  template: '<li>这是个待办项</li>'
  //渲染模板
})

var app = new Vue(...)

//现在你可以用它构建另一个组件模板：
<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

计算属性和侦听器

computed

针对复杂逻辑使用

计算属性的setter

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

watch
- Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。
- 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
- IIFE: Immediately Invoked Function Expression，意为立即调用的函数表达式

vue中computed和methods区别

computed可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以，computed 具有缓存功能，在系统刚运行的时候调用一次。只有只有当计算结果发生变化才会被调用
用 methods 方法编写的逻辑运算，在调用时 add() 一定要加“()”，methods 里面写的多位方法，调用方法一定要有（）。methods方法页面刚加载时调用一次，以后只有被调用的时候才会被调用。

vue中关于$emit的用法

父组件可以使用props把数据传给子组件
子组件可以使用$emit触发父组件的自定义事件
vm.$emit(event,arg)触发当前实例上的事件
vm.$on(event,fn) 监听event事件后运行fn

v-if和v-show的区别

v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
v-if也是惰性的：如果在初期渲染时条件为假，则什么也不做知道条件第一次变为帧时，才开始渲染条件块
v-show不管初始值是什么，元素块总会被渲染，并且只是简单基于CSS进行切换
v-if具有更高的切换开销，而v-show有更高的初始渲染开销，隐藏，如果需要非常频繁的切换，用v-show比较好，如果在运行时条件很少改变，则用v-if比较好

w_cyj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门

什么是vue一套用于构建用户界面的渐进式框架Vue 被设计为可以自底向上逐层应用Vue的核心只关心视图层直接在浏览器打开：npx http servernpm i browser-sync 下载brower-sync start -s -f */ --directory -w 监听brower-sync(npm,yarn):是node.js 的一个模块引入vue.js直接在官网下载js文件，然后引入<!-- 开发环境版本，包含了有帮助的命令行
复制链接

扫一扫