Vue的基础-属性

2022-06-23 22:35:11 阅读：71 来源： 互联网

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,基础,视图,js,Vue,属性,data,页面
来源： https://www.cnblogs.com/HJZ114152/p/16407005.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue的基础-属性