Vue基础知识

最新推荐文章于 2023-11-26 20:22:27 发布

Yolanda^_^

最新推荐文章于 2023-11-26 20:22:27 发布

阅读量164

点赞数

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

本文链接：https://blog.csdn.net/weixin_50801389/article/details/112546387

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天新学了一门Vue，下面来做个总结(>^.<)

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue基础入门

1.基本介绍

Vue是一个MVVM库，是一套构建用户界面的渐进式框架。

库（jq）：封装了一些常用的方法供我们调用，并没有很强的约束

框架（vue）：就像一门全新的语言一样提供了一套规则框架使用者必须遵守框架的使用规则来实现需求

核心区别：有没有提供一套严格的规则约束

目前市场需求来说Vue是前端主流框架之一，和Angular，React一起，成为前端三大主流框架。

1.1.vue核心特性

渐进式开发
可以针对不同大小的项目搭配不同的vue技术组合，可以以一个最小的入侵性（对原始项目的破坏程度）使用vue开发
申明式开发
数据驱动视图（响应式）
双向绑定
组件系统

2.安装Vue

项目阶段采用npm下载的方式使用
1.CDN

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

2.下载源码通过路径引入

开发版本：https://vuejs.org/js/vue.js
生产版本：https://vuejs.org/js/vue.min.js

3.使用npm下载

npm install vue

3.声明式渲染和数据驱动视图

在这里插入图片描述

<body>
  <div id="app">
    {{name}}
  </div>
  <script>
    const vm = new Vue({
      el:'#app',
      data: {
        name: '小明'
      }
    })
    setTimeout(()=>{
      vm.name = '小明爸爸'
    },2000)
  </script>
</body>

4.Vue的三个基础实例配置项

4.1 el,data,methods

var app = new Vue({
   el : '#app',//Vue实例在dom中的挂载点，确定Vue能够控制的视图区域
   //可接受的值   1.css选择器字符串   2.HTMLElement实例
   data : {//为视图提供响应式数据，是一个对象，可以存放任意类型的值，数据是响应式的，一旦发生变化，视图依赖数据的部分会立即发生变化
    msg: 'hello Vue' 
 },
 methods: {
 //放置各种方法实现各种业务功能
 //如何调用:
 //1.通过vm实例    vm.getName()
 //2.通过模板调用  {{getName()}}
 //3.作为元素事件的绑定函数来调用  (最常用)
 //4.通过this关键词调用  一般是在其他实例配置项或者methods中的其它函数中调用  this.getName()
 }
})

5.插值表达式

将数据动态的渲染到页面中（胡子语法）

语法：{{data项}}

用法：

进行四则运算
字符串拼接
三元运算?:
js原生对象方法调用
methods中方法调用

注意： 插值表达式不支持js语句=>比如变量声明循环语句自增运算等

6.内置指令

指令（Directives）是带有v-前缀的特殊 attribute

6.1 v-once
只执行一次性地差值，当数据改变时，插值处的内容不会更新

6.2 v-text和v-html
作用：响应式的控制dom元素内容的变化

<div id="app">
    <div v-text="contentString"></div>
    <div v-html="contentHtml"></div>
</div>
<script>
const vm = new Vue({
  el:'#app',
  data:{
    contentString:'只能渲染纯文本',
    contentHtml:'<div style="height:100px;color:red">我是富文本（识别标签）</div>'
  }
})
/*注意事项：
    1.使用v-html的时候注意安全攻击 确保渲染的内容是可控的   （做过滤处理 将可能造成安全问题的标签属性过滤掉）
    2.v-text vs {{}}  只要使用了v-text指令 元素内部的内容完全交给v-text来控制 自定义内容不生效*/
</script>

扩展阅读：https://cn.vuejs.org/v2/guide/security.html

Yolanda^_^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础知识

Vue基础知识今天新学了一门Vue，下面来做个总结(>.<)提示：以下是本篇文章正文内容，下面案例可供参考一、Vue基础入门1.基本介绍Vue是一个MVVM库，是一套构建用户界面的渐进式框架。库（jq）：封装了一些常用的方法供我们调用，并没有很强的约束框架（vue）：就像一门全新的语言一样提供了一套规则框架使用者必须遵守框架的使用规则来实现需求核心区别：有没有提供一套严格的规则约束目前市场需求来说Vue是前端主流框架之一，和Angular，React一起，成为前端三大主流
复制链接

扫一扫

专栏目录