vue.js(一)

最新推荐文章于 2022-10-15 22:03:50 发布

一瓶微风

最新推荐文章于 2022-10-15 22:03:50 发布

阅读量287

点赞数

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

本文链接：https://blog.csdn.net/BReezeFK/article/details/108101614

版权

vuejs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

`vue.js`

Vue(读音类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

一、vue 基础

1. vue.js 的基本架构

<div id="app">
    
</div>
<!-- 引入vue.js文件 -->
<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            
        }
    })
</script>

2. vue的一些指令

指令（Directives）是写在html标签上的带有 v- 前缀的特殊属性。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

常用指令包括如下:

数据绑定指令:把数据作为元素的内容显示出来。

v-text

v-html

v-model

属性指令：把数据设置成为元素的属性.例class,src等。

v-bind

条件指令:

v-if v-elseif v-else

v-show

循环指令

v-for

1. v-text

v-text 等价于插值语法{{ }}。只能解析文本，将解析之后的文本作为标签的内容。

<p v-text="ad"></p>   ==  <p>{{ad}}</p>			

data:{ad:"abcdefg"}
复制代码

2. v-html

与v-text类似。但它可以解析html标签。

<p v-html="ac">	</p>    

data：{ac:"<h1>这是一个标题</h1>"}

3. v-model

实现双向数据绑定（v-model 是 @input + :value 的一个语法糖）

对标签有要求。它不能加在span标签上：因为span不能获取用户的输入，用户不能直接去修改span的内容。

它更加适应加在表单元素上。例如 input。用户可以去更改input的内容。

p>{{ad}}</p>
<input v-model="ad" type="text"/>			//data:{ad:"初始值，也可以为空"}

4. v-bind

<标签 **v-bind:**属性名=”data配置项设置的属性名 ”>

作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

有两个属性因为用的非常的多，所以它单独地设置了特殊用法：

style Class

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

5. v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 的时候被渲染。

也可以用 v-else 添加一个“else 块”：

<p v-if="false">1111111</p>
<p v-else>22222222</p>

<!--v-else 必须紧跟在带v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。可以使用 v-else-if 指令来形成嵌套条件循环-->

<p v-if="true">1111111</p>	

<!--v-if指令后的true或false也可用一个表达式来代替,但要用引号包起来-->

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

6. v-show

用于根据条件展示元素的选项是 v-show 指令。用法与v-if大致一样

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。即v-show=false等于display=none

<p v-show="true">1111111</p>
复制代码

7. v-if VS v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

8. v-for

<标签 v-for=“(value,key,index) in obj”></标签>

<p v-for="value in 10">{{value}}</p>		//从一到十

obj就是定义在data配置项中的数据。
它会产生多个标签
Value,index,key只是形参名，可以更改，并根据需要，可按顺序省略
可供循环的数据有：
- 数组对数组循环时，第三个参数没有用。
- 对象
- 整数对整数循环时，从一开始，索引从0开始
v-for 可用来循环数组循环对象整数

vue 2.5 版本以上，使用v-for，需要加上key key要唯一

template上面是不能绑定key key的作用：区分元素,现在一般都要加上key绑定

尽量不要使用index做为key，index会在数据变化时产生一些问题，如果有唯一标示，尽量使用唯一标示。

二、`vue`的配置项

1. 方法 `methods`

New Vue()会设置一些配置项，如data表示数据。这些配置项有一个就是methods,它是可选，可以写也可以不写。

它的作用就相当于你可以写一些的逻辑代码，像函数一样去调用。

调用方法一：在 vue实例的外面，通过 app.f1(), app.f2() 去访问。

调用方法二：在 vue 实例内部，直接调用。一般在{{}} 或者是v-bind中使用

在一个方法中调用另一个方法，需要加上this

<div id="app">
	{{f1()}}			//在 vue 实例内部，直接调用。
</div>



<script>
var app = new Vue({
	el: "#app",
	data: {
        
	},				//这里要用逗号隔开
	methods:{
        f1(){
            
        },			//各个函数之间也要用逗号隔开
        f2(){
            
        }
	}
})
</script>

2. 计算属性 `computed`

计算属性computed也是 vue 实例的配置项。声明式的描述一个值依赖了其它的值.

用法：一般是对初始数据（data中数据项）进行加工，处理，返回新的数据。

调用：计算属性本质上也是一个函数，但在调用时与普通数据项一样，不需要加 ()。

<script>
    Var vm = new Vue({
        el: ”#app”,
        data: {},
        methods: {},
        computed: {
            计算属性名: function () {
                return 值; //一定会有返回值
            }
        }
    })
</script>

计算属性与方法之间的区别：

计算属性有缓存，函数没有缓存！
函数比较敏感
使用的区别计算属性虽然本质也是方法，但它不加() ,方法要加()

3. 过滤器 `filters`

过滤器是用来格式化数据。与 el , data, methods, coputed一样，也是一个 vue实例的配置项。

格式： {{数据| 过滤器}}

多个过滤器一起使用：

格式：{{数据项 | 过滤器1 | 过滤器2 }}

过滤器将数据在被指令处理并显示到视图之前进行转换，而不必修改作用域中原有的数据，这样能够允许同一份数据在应用的不同部分以不同形式得以展示。

  <div id="app">
      <input type="text" v-model="msg" />
      <h2>{{msg}}</h2>
      <h2>{{msg | addStr | addStr2}}</h2>
    </div>
  </body>
  
<!-- 引入vue.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
  const app = new Vue({
    el: "#app",
    data: {
      msg: "你好吗？",
    },
    filters: {
      addStr(value) {
        console.log(value);
        return value + "吃了吗？";
      },
      addStr2(value) {
        return value + "没吃";
      },
    },
  });
</script>

在这里插入图片描述

在写过滤函数时，注意参数在传递的过程中的对应关系：

第一个参数(必填) 是你一定要过滤的数据项。
第二个参数(可选) 后面的参数就是你写在()中的实参

在调用时，如果有两个或两个以上的参数，第一个参数不需要填写，直填写第二个及以后的参数

过滤器的特殊之处在：

它的定义时，至少要有一个参数，而这个参数在调用时并不需要给实参：第一个参数默认的实参值就是你要过滤的数据项。
它一定要有返回值，这一点与计算属性是一致的。

一瓶微风

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue.js(一)

vue.jsVue(读音类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。一、vue 基础1. vue.js 的基本架构<div id="app"> </div><scr
复制链接

扫一扫