Vue基础--优点及基础语法

最新推荐文章于 2024-07-12 16:27:40 发布

Yqi9979

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量199

点赞数

分类专栏：前端框架-Vue 代码 Vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/qq_41418149/article/details/108783226

版权

代码同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

Vue

4 篇文章 0 订阅

订阅专栏

前端框架-Vue

2 篇文章 0 订阅

订阅专栏

Vue 基础介绍

Vue是什么？

Vue.js是一套用于构建用户界面的渐进式框架，主要用于单页面应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue优点

1.易用、灵活、高效、 指令系统、SPA(单页面应用) 、MVVM
2.Vue 不支持IE8 及以下版本

多页面应用：1个url 对应一个html页面，多个url对应多个html
多页面应用有利于SEO优化，但会白屏，用户体验不好
单页面应用：多个url对应1个html页面
单页面首屏加载比较慢，不利于SEO优化，用户体验好

采用 vue：大量的数据增删改查的操作
使用 jq ：大量的DOM节点操作或者动画(show、hide 、slideDown 、slideUp等) ,

Vue安装

官网：https://cn.vuejs.org/

vue安装及引入：

1.cdn ：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.npm： npm install vue
3.vue脚手架：
     ①安装webpack：npm install webpack -g
     ②安装vue-cli脚手架：npm install vue-cli -g
     ③查看安装版本：vue --version
     ④初始化脚手架项目：vue init webpack 项目名称（项目名称最好不用中文和空格）
     ⑤进入到项目根目录：cd 项目名称
     ⑥运行项目：npm run dev

Vue基础写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.安装 npm i vue  -->
    <!-- 2.引入 -->
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 3.控制范围 -->
    <div id="app">
    	<!-- {{}}:模板语法 -->
        {{1+1}} <!-- 2 -->
        {{x}}  <!-- 10 -->
    </div>
    <script>
        // 4.实例化vue对象
        new Vue({
            el:"#app",//挂载点
            data:{
            //属性（变量）
            },
            methods:{
            //方法（函数）
            }
        })
    </script>
</body>
</html>

Vue学习

1.el 挂载点

1.不能挂载到body|html,要挂载到正常的元素上
2.一个vue实例只能挂载到一个节点上，所以一般情况下使用id选择器
3.如果有好几个元素都满足el的选择，vue实例挂载到满足条件的第一个节点上

2.data 属性：先声明后使用

new Vue({
	el:"#app",//挂载点
	data:{	//属性-变量
		x:10,
     	arr:[]
	}
})

3.methods 方法

new Vue({
	el:"#app",//挂载点
    methods:{
    	show:function(){},
    	hide:function(){},
  	}
})

Yqi9979

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础--优点及基础语法

Vue 基础介绍Vue是什么？Vue.js是一套用于构建用户界面的渐进式框架，主要用于单页面应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue优点1.易用、灵活、高效、指令系统、SPA(单页面应用) 、MVVM2.Vue 不支持IE8 及以下版本多页面应用：1个url 对应一个html页面，多个url对应多个html多页面应用有利于SEO优
复制链接

扫一扫