vue框架

土豆切成丝

已于 2022-05-09 10:12:46 修改

阅读量9.8w

点赞数 61

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-05-09 01:03:15 首次发布

本文链接：https://blog.csdn.net/a20201130/article/details/124656316

版权

本文介绍了Vue.js的基础知识和核心特性，包括数据驱动视图、MVVM模式、组件化开发，以及常用的指令如v-if、v-show、v-model等。深入探讨了Vue的双向数据绑定原理，并对比了计算属性和watch的差异。通过对Vue的了解，帮助开发者更好地理解和应用Vue进行前端开发。

摘要由CSDN通过智能技术生成

一、vue是什么

官方解释：vue是一套用于构建用户界面的渐进式框架。

vue是一个js框架，提供了一套开发规则，按照这个开发规则可提高开发效率。

补充：渐进式意思是，vue.js本身功能局限，一旦配合其他的工具可以增强其能力。

vue-router
vuex
axios
nuxt

二、vue的核心

①数据驱动视图（页面）

修改绑定的数据（页面上依赖数据），就能对应的更新视图（页面），极大的解放了操作dom的工作，提供开发效率。

②MVVM模式

M 数据模型 model
V 视图（页面）view
VM数据模型和视图的控制器 viewmodel
数据双向绑定

③组件化开发

通常一个应用会以一颗嵌套的组件树的形式来组织

把页面按照页面功能（导航，侧边栏，下拉框）拆分业务，每一个组件时一个独立的功能，提供代码可维护性，和复用性。

三、vue使用

hello vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <h1>{
  {msg}}</h1> <!-- 插值语法-->
    </div>
    <!-- 引入 -->
    <script src="./vue2.js"></script>
    <script>
        // 实例化vue
        let  vm = new Vue({
            // vue的选项，el选项的作用指定vue实例管理的容器
            el:'#app',
            // vue选项，data作用是声明响应式数据
            data:{
                msg:'hello vue'
            }
        })
    </script>
</body>
</html>

页面显示：

四、vue-指令

1.v-text和v-html

v-text：更新替换标签内容，文本；v-html更新替换标签内容，html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <h1 v-text="text"></h1>
        <h1 v-html="html"></h1>
    </div>
    <!-- 引入 -->
    <script src="./vue2.js"></script>
    <script>
        // 实例化vue
        let  vm = new Vue({
            // vue的选项，el选项的作用指定vue实例管理的容器
            el:'#app',
            // vue选项，data作用是声明响应式数据
            data:{
                text:'v-text:<span>hello vue</span>',
                html:'v-html:<span>hello vue</span>'

最低0.47元/天解锁文章

土豆切成丝

关注

61
点赞
踩
346

收藏

觉得还不错? 一键收藏
8
评论
vue框架

一、vue是什么官方解释：vue是一套用于构建用户界面的渐进式框架。vue是一个js框架，提供了一套开发规则，按照这个开发规则可提高开发效率。补充：渐进式意思是，vue.js本身功能局限，一旦配合其他的工具可以增强其能力。vue-router vuex axios nuxt二、vue的核心①数据驱动视图（页面）修改绑定的数据（页面上依赖数据），就能对应的更新视图（页面），极大的解放了操作dom的工作，提供开发效率。②MVVM模式M 数据模型 model V 视图..
复制链接

扫一扫

专栏目录