当前位置： 移动技术网 > IT编程>开发语言>Java > vue学习----1.初识vue&&vue基本语法

vue学习----1.初识vue&&vue基本语法

2020年07月23日  | 移动技术网IT编程  | 我要评论

前言

基本知识：

  • Express：NodeJS框架‘’
  • Koa：Express简化版
  • NPM：项目综合管理工具，类似于Maven
  • YARN：：NPM的替代方案，类似与Maven和Gradle的关系

前端主流框架：vue，ElementUI
ElementUI：饿了么的Vue UI组件库，主要用于开发PC端页面
前端为主的时代：
MVC---->MVP【Model,View,Presenter】---->MVVW【Model,View,VIewModel】
NodeJS带来的全栈时代：适合小型网站

Vue

Vue：一套用于构建用户界面的渐进式框架，vue被设计为可以自地向上逐层应用，vue的核心库只关注视图层，不仅易于上手，还便于和第三方库或项目整合

Vue初体验：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- view层,模板 -->
    <div id="app">
        {{message}}
    </div>
</body>
<!-- 引入vue.js -->
<script src="js/vue.js"></script>
<script>
    let myvue01 = new Vue({
        el:"#app",  <!-- 绑定元素 -->
        data:{
            <!-- 信息 -->
            message:"Hello Vue!"
        }
    });
</script>
</html>

MVVM：一种软件架构设计模式，是一种简化用户界面的事件驱动编程方式，MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向绑定，向下与Model层通过接口请求进行交互
MVVM的优点：

  • 低耦合：视图【View】可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变
  • 可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑
  • 独立开发：开发人员可以专注于业务逻辑和数据的开发【ViewModel】，设计人员可以专注于页面设计
  • 可测试：界面向来是比较难测试的，而现在测试可以针对于ViewModel来写

Vue.js就是MVVW的一个很好的实现

v-bind

前面可以发现控制台的操作界面可以实时更新，另外我们也可以使用v-bind来绑定元素特性，而v-bind等被称为指令，指令前缀v-，表示是vue提供的特殊特性

vue基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- view层,模板 -->
    <div id="app">
        {{message}}
        <p>
            <span v-bind:title="message">鼠标悬停几秒</span>
        </p>
        <p>
            <h1 v-if="flag">YES</h1>
            <h1 v-else>NO</h1>
        </p>
        <p>
            <h2 v-if="score>90">A</h2>
            <h2 v-else-if="score>80">B</h2>
            <h2 v-else-if="score>70">C</h2>
            <h2 v-else-if="score>60">D</h2>
            <h2 v-else-if="score<60">E</h2>
        </p>
        <p>
            <h3 v-for="person in persons">
                姓名:{{person.name}},年龄:{{person.age}}
            </h3>
        </p>
    </div>
</body>
<!-- 引入vue.js -->
<script src="js/vue.js"></script>
<script>
    let myvue01 = new Vue({
        el:"#app",  <!-- 绑定元素 -->
        data:{
            <!-- 信息 -->
            message:"Hello Vue!",
            flag: true,
            score: 95,
            persons: [{name: "张三",age: 18},{name: "李四",age: 20}]
        }
    });
</script>
</html>

补充

vue扩展插件：

  • vue-cli：vue脚手架
  • vue-resource(axios)：ajax请求
  • vue-router：路由
  • vuex：状态管理
  • vue-lazyload：图片懒加载
  • vue-scroller：页面滑动相关
  • mint-ui：基于vue的UI组件库(移动端)
  • element-ui：基于vue的UI组件库(PC端)

本文地址：https://blog.csdn.net/weixin_44246189/article/details/107514301

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网