VUE

vue-cli脚手架，vue-router路由 vuex做状态管理 vue ui 界面

1.下载node.js

2.下载vue-cli

cnpm install vue-cli -g

查看模版

vue-list

1.创建第一个vue的项目

vue init webpack myvue

一路no

2.初始化运行

cd myvue


npm install


npm run dev

构建用户界面的前段框架

  • 构建用户界面

    • 编写页面结构
    • 美化格式
    • 处理交互

一：传统的

1.传统的：jQuery+模版引擎

  • 需要定义大量的模版结构
  • 缺少语法高亮
  • 数据变化时要重行调用编译的函数，否则页面不会更新

2.基础的CSS样式美化页面的可视化效果

3.基于jQuery技术，处理用户和网页之间的交互

  • 大量的时间在处理都dom的操作上，而不是业务

vue

1.基于使用vue中提供的指令，可以方便的渲染页面结构。

  • 数据驱动视图
  • PS指令是vue为开发者提供的模版语法，用来辅助开发者渲染页面的结构

2.基础的CSS样式，美化页面的可视化效果

3.基于vue提供的时间绑定，可以轻松的处理用户和页面之间的交互行为

框架

提供了构建用户界面的一整套的解决方案

  • vue（核心库）
  • vue-router（路由方案）
  • vuex（状态管理）
  • vue组件库（快速搭建页面的ui效果的方案）

辅助配置工具

  • vue-cli
  • vue-devtools

vue的特性

  • 数据驱动视图

    vue会监听数据的变化，从而自动从星的渲染页面的结构自动渲染页面-------单向数据绑定

    双向数据绑定：

    MVVM：实现数据驱动和双向绑定的核心---是vue的实例

    View----ViewModel----Model

    （自动更新/监听DOM的变化）（监听数据的变化/自动同步）

vue的版本

  • 新增：组合API、多根节点组件、更好的TypeScript的支持
  • 废弃了：过滤器、不在支持、$、on、$off、和$one实例方法

vue的基本使用

1.导入vue.js的script脚本文件

2.在页面中声明一个将要被vue所控制的DOM控制区

3.创建vm实例对象（vue的实例对象）

MVVM

软件架构模式，微软--

data：Model的数据源

el：指向的选择器，是View的视图区域

vm：实例是ViewModel

{{username}}

:是View的视图区域

<!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>Document</title>

</head>

<body>

    <!-- 声明vue的工作区域 -->

    <div id="app">{{username}}</div>

    <!-- 导入vue的脚本 -->

    <script src="./lib/vue.js"></script>

    <!-- 创建vue的实例对象 -->

    <script>

        const vm = new Vue({

            //使用EL属性，指向vue要控制的区域

            el:'#app',

            //数据源

            data:{

                username:'20'

            }

        })

    </script>

</body>

</html>

vue-devtools

在谷歌浏览器里面，极简插件

el挂载点

  • 用来设置Vue的挂载（管理）的元素
  • vue会管理命中的元素和内部的后代元素
  • 可以使用不同的选择器，建议id
  • 可以使用其他的双标签，但是不能使用HTML和body

date

基本渲染：

{{message}}

{{student.name}}

{{list[0]}}

基本属性

1.el属性

用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。

2.data属性

用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。

3.template属性

用来设置模板，会替换页面元素，包括占位符。

4.methods属性

放置页面中的业务逻辑，js方法一般都放置在methods中

5.render属性

创建真正的Virtual Dom

6.computed属性

用来计算 Vue.js 计算属性，计算属性在处理一些复杂逻辑时是很有用的

7.watch属性

Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化 watch:function(new,old){}

监听data中数据的变化 两个参数，一个返回新值，一个返回旧值。

以上就是vue常用的7个属性，当然vue的属性可不知这些，开发需要的话可以在官网查阅剩余属性。

Vue的基础-属性的更多相关文章

  1. Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

  2. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  3. react router @4 和 vue路由 详解(一)vue路由基础和使用

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...

  4. Vue.js 计算属性是什么

    Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...

  5. 0807 创建vue实例以及vue的基础指令

    lession1 1.Vue的了解   渐进式框架   作者:尤雨溪     mvvm 2.创建vue实例 引入<script src="vue.js"><scr ...

  6. vue入门基础知识点测试

    vue入门基础知识点测试 1.文本(值绑定){{var}}----控制<div></div>的值显示当前时间,且1秒更新一次.(可查阅 setinterval 函数,时间Dat ...

  7. vue 快速入门 系列 —— vue 的基础应用（上）

    其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...

  8. vue 快速入门 系列 —— vue 的基础应用（下）

    其他章节请看: vue 快速入门 系列 vue 的基础应用(下) 上篇聚焦于基础知识的介绍:本篇聚焦于基础知识的应用. 递归组件 组件是可以在它们自己的模板中调用自身的.不过它们只能通过 name 选 ...

  9. Unity UGUI——Rect Transform组件（基础属性）

    基础属性:Width.Height.Pivot图示 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTXJfQUhhbw==/font/5a6L5L2T/fo ...

  10. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

随机推荐

  1. 深度学习之Tensorflow入门

    声明 本文参考[中文][吴恩达课后编程作业]Course 2 - 改善深层神经网络 - 第三周作业_何宽的博客-CSDN博客我对这篇博客加上自己的理解,力求看懂 本文所使用的资料已上传到百度网盘[点击 ...

  2. VsCode搭建一个React项目

    安装Node.js 使用 npm -v检查安装成功 目前的 node 中都会自带 npm 所以不需要重新下载 直接切换至淘宝镜像即可 1.临时使用 :npm --registry https://re ...

  3. X活手环的表盘自定义修改

    文章用到的所有工具及软件成品 前言 前几天我在某宝买了一个智能手环,无奈软件中的表盘太少,所有我想着修改一下app中的资源文件. 反编译APK 这里反编译APK用apktool工具就可以. apkto ...

  4. 漫谈计算机网络：应用层 ----- 从DNS域名解析到WWW万维网再到P2P应用

    2022-12-04 18:31:01 纪念一下博主的<漫谈计算机网络>连载博客 浏览量破500了! 今天更新完结篇! 面试答不上?计网很枯燥? 听说你学习 计网 每次记了都会忘? 不妨抽 ...

  5. 使用python脚本传递参数：（三种方式可收藏）

    背景:使用python脚本传递参数在实际工作过程中还是比较常用,以下提供了好几种的实现方式: 一.使用sys.argv的数组传入说明:使用sys.argv必须按照先后的顺序传入对应的参数:sys.ar ...

  6. Python全栈工程师之从网页搭建入门到Flask全栈项目实战(5) - Flask中的ORM使用

    1.理解ORM ORM是MTV模型里面的Model模型 ORM(Object Relational Mapping),对象关系映射 举例:学生选课 学生和课程这两个实体,一个学生可以选择多门课程,一个 ...

  7. .NET 云原生架构师训练营（基于 OP Storming 和 Actor 的大型分布式架构一）--学习笔记

    目录 为什么我们用 Orleans Dapr VS Orleans Actor 模型 Orleans 的核心概念 为什么我们用 Orleans 分布式系统开发.测试的难度(服务发现.通信) 运维的复杂 ...

  8. 微信小程序地区和location_id对应关系

    点击查看代码 location_list = [ {'location_id': '101010100', 'location_name': ['北京', '北京', '北京']}, {'locati ...

  9. python画社交网络图

    安装依赖包 pip3 install networkx 在图书馆的检索系统中,关于图书的信息里面有一个是图书相关借阅关系图.跟这个社交网络图是一样的,反映了不同对象间的关联性.利用python画社交网 ...

  10. DevExpress 的LayoutControl控件导致资源无法释放的问题处理

    现象记录 前段时间同事发现我们的软件在加载指定的插件界面后,关闭后插件的界面资源不能释放, 资源管理器中不管内存,还是GDI对象等相关资源都不会下降. 问题代码 问题的代码大概如下. public v ...