第一章 Vue.js概述

最新推荐文章于 2023-03-05 04:12:08 发布

振先森

最新推荐文章于 2023-03-05 04:12:08 发布

阅读量233

点赞数

分类专栏： Web前端高级技术（Vue.js)笔记文章标签： react.js vue.js javascript

本文链接：https://blog.csdn.net/Gene_zhen/article/details/120275835

版权

Web前端高级技术（Vue.js)笔记专栏收录该内容

3 篇文章 4 订阅

订阅专栏

第一章 Vue.js概述

一、Web前端高级技术三大框架

1、Angular

双向数据绑定Angular是一款优秀的前端JS框架，已经被用于Google的多款产品当中

Angular特性：

良好的应用程序结构
双向数据绑定
指令
HTML模板
可嵌入、注入和测试
兼容性好

Angular优势：

丰富的angular指令
完善的前端框架
自定义指令
ng模块化引入了Java
谷歌开发

Angular缺点：

深入后概念很多
文档例子非常少
兼容不好
实践教程少

2、React

React特性：

声明式设计：声明范式
高效：对DOM的模拟
灵活：已知的库或框架很好地配合

React优势：

速度快
跨浏览器兼容
模块化
单向数据流
同构、纯粹的Javascript
兼容性好

React缺点：

React本身只是一个V而已，并不是一个完整的框架。
ReactRouter和Flux才能写大型应用。

3、Vue

Vue是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。

Vue特性：

轻量级的框架
双向数据绑定
指令
插件化

Vue优势：

简单易学
快速–异步批处理方式更新 DOM
组合
紧凑
强大
对模块友好

Vue缺点：

新生儿
影响度不是很大
不支持IE8

二、安装Vue.js和WebStorm

略

三、创建Vue实例

1、创建第一个Vue实例，在WebStorm工具中编写代码，在页面中输出I like Vue.js”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="Js/vue.js"></script>
    <title>第一个Vue实例</title>
</head>

<body>
<div id="example">
    <h1>{{message}}</h1>
</div>
<script type="text/javascript">
    var demo01 = new Vue({
        el:'#example',
        data:{
            message:'I like Vue.js'
        }
    });
</script>
</body>
</html>

Vue的基本使用步骤

需要提供标签用于填充数据
引入vue.js文件
可以使用vue的语法做功能了
把vue提供的数据填充到标签里面

2、创建Vue实例，创建输入框，在页面中输出输入框内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第三个Vue实例</title>
        <script type="text/javascript" src="JS/vue.js"></script>
</head>

<body>
<div id="example">
    <input type="text" v-model="message" placeholder="你的名字">
    <h1>你好，{{message}}</h1>
</div>
<script type="text/javascript">
    var demo = new Vue({
        el:'#example',
        data:{
            message:''
        }
        });
</script>
</body>
</html>

振先森

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一章 Vue.js概述

第一章 Vue.js概述一、Web前端高级技术三大框架1、Angular 双向数据绑定Angular是一款优秀的前端JS框架，已经被用于Google的多款产品当中Angular特性：良好的应用程序结构双向数据绑定指令HTML模板可嵌入、注入和测试兼容性好Angular优势：丰富的angular指令完善的前端框架自定义指令ng模块化引入了Java谷歌开发Angular缺点：深入后概念很多文档例子非常少兼容不好实践教程少2、ReactReact特
复制链接

扫一扫