Vue_初识

2023-09-25 13:14:33

Vue

推荐浏览官方文档 : https://v3.cn.vuejs.org/guide/conditional.html

1. 概念

Vue是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库( 如: vue-router:跳转，vue-resource:通信, vuex:管理 )或既有项目整合。

网络通信 : axios

页面跳转 : vue-router

状态管理 : vuex

Vue-Ul : Ant-Design , ElementUI - iview - ice , BootStrap , AmazeUI

构键工具 : webpack , babel

CSS预处理器 :

"用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用"

常用的CSS预处理器 :
SASS : 基于Ruby，通过服务端处理，功能强大。解析效率高。需要学习Ruby 语言，上手难度高于LESS。
LESS : 基于NodeJS，通过客户端处理，使用简单。功能比 SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用LESS。

Vue : 一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular(模块化 MVVM [View,DATA,ViewModel数据双向绑定])和React(虚拟DOM [利用内存])的优点

NodeJS

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

MVVM

Vue_初识

Model : 模型层，在这里表示JavaScript对象

View : 视图层，在这里表示 DOM (HTML操作的元素)

ViewModel : 连接视图和数据的中间件，Vue.js 就是 MVVM中的ViewModel层的实现者

ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变

前端开发程序 : Vscode , Hubilder , sublime , webStrom

2. 基础

el
data
template
methods
render
computed
watch

 <!--===============view===============-->
 <div id="app">{{message}}</div> 
 <!--===============model===============-->
 <script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.min.js"></script>
 <script>
     var vm = new Vue({
         el: "#app",
         data: {
             message: "hello!" //动态展示
         } 
     });
 </script>
 <!--===============viewmodel===============-->
 vm.message="hello" /

v-bind 简写":"

 <!--v-bind等被称为指令,指令带有前缀 " -v "-->
 <span v-bind:title="message">鼠标悬停动态信息</span>

条件渲染

v-if

 <div id="app">
     <h1 v-if="ok">yes</h1>
     <h1 v-else>no</h1>
     
     <h1 v-if="type===‘A‘">A</h1>
     <h1 v-else-if="type===‘B‘">B</h1>
     <h1 v-else>C</h1>
 </div>
 <script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.min.js"></script>
 <script>
     var vm = new Vue({
         el: "#app",
         data: {
             ok: true, //动态展示
             type: ‘A‘
         } 
     });
 </script>

v-for

 <div id="app">
     <!--  (item,index) in items   : index默认值,序号-->
     <h1 v-for="item in items">
         {{item.message}}
     </h1>
 </div>
 <script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.min.js"></script>
 <script>
     var vm = new Vue({
         el: "#app",
         data: {
             items: [
                 {message: ‘Java‘},
                 {message: ‘前端‘}
             ]
         } 
     });
 </script>

事件v-on

v-on 简写 "@"

<div id="app">
     <buttom v-on:click="sayHello">click me</buttom>
 </div>  
 <script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.min.js"></script>
 <script>
     var vm = new Vue({
         el: "#app",
         data: {
             message: "Hello!"
         }, 
         methods: { //方法必须定义在methods对象中
             sayHello: function(event){
                 alert(this.message);
             }
         }
     });
 </script>

数据双向绑定input

text

 <div id="app">
     输入:<input type="text" v-model="message">{{message}}
     <!--<textarea name="" id="" clos="30" rows="10" v-model="message"></textarea>-->
 </div>  
 <script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.min.js"></script>
 <script>
     var vm = new Vue({
         el: "#app",
         data: {
             message: "123" //默认数据
         }
     });
 </script>

radio

 <div id="app">
     <input type="radio" name="sex" value="男" v-model="name">男
     <input type="radio" name="sex" value="女" v-model="name">女
     选中:{{message}}  <!--获取的是value的值-->
 </div>  
 <script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.min.js"></script>
 <script>
     var vm = new Vue({
         el: "#app",
         data: {
             name: ‘‘ 
         }
     });
 </script>

slect

 <div id="app">
     <select v-model="selected">
         <option value="" disabled>--请选择--</option>
         <option>A</option>
         <option>B</option>
         <option>C</option>
     </select>
     <span>value:{{selected}}</span>
 </div>  
 <script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.min.js"></script>
 <script>
     var vm = new Vue({
         el: "#app",
         data: {
             selected: ‘‘ 
         }
     });
 </script>

注意：v-model初始值未能匹配任何选项，select元素讲被渲染为未选中。在ios中会导致用户无法选择第一个选项，推荐设置一个空值禁用项

组件component

 <div id="app">
     <!--for循环得到itam,通过绑定aaa将itam传递给组件,组件才能获得数据-->
     <com v-for="item in items" v-bind:aaa="item"></com>
 </div>  
 <script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.min.js"></script>
 <script>
     Vue.component("com",{
         props: [‘aaa‘],
         template: ‘<li>{{item}}</li>‘
     });
     var vm = new Vue({
         el: "#app",
         data: {
             items: ["Java","Linux","Web"]
         }
     });
 </script>

v-bind:aaa="item" -- iteam是由for遍历出的元素,aaa是传递给组件的元素,aaa与tiem绑定.组件才能调用外面的数据

网络通信axios

jQuery.ajax ()
axios

Axios是一个开源的可以用在浏览器端和NodeJs的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:

从浏览器中创建 XMLHttpRequests
从node.js 创建http 请求
支持Promise APl [ JS中链式编程 ]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF (跨站请求伪造)

生命周期

Vue_初识

 <div id="vue">
     <div>{{info.name}}</div>
     <div>{{info.address.street}}</div>
     <a v-bind:href="info.url">连接</a>
 </div>
 ?
 <!--引入JS文件-->
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script type="text/javascript">
     var vm = new vue({
         el: "vue",
         data(){
             return{
                 //请求的返回参数合适,必颈和 json字符串一样
                 info:{
                     name: null,
                     address: {
                         street: null,
                         city: null,
                         country: null
                     },
                     url: null
                 }
             }
         },
         mounted(){ //钩子函数,链式编程 - data.json是新建存储Json格式数据的文件
             axios.get(‘../data.json‘).then(response=>(this.info=response.data));
         }
     });
 </script>

计算属性computed

 <div id="app">
     <p>currentTime1 {{currentTime1()}}</p>
     <!--computed通过属性调用,methods通过方法调用-->
     <p>currentTime2 {{currentTime2}}</p>
 </div>  
 <script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.min.js"></script>
 <script>
     var vm = new Vue({
         el: "#app",
         data: {
             message: "hello"
         },
         methods: {
             currentTime1: function() {
                 return Data.now();  //返回时间戳
             }
         },
         computed: { //计算属性,methods与computed方法名不能，重名后只会调用methods方法
             currentTime2: function() {
                 this.message;
                 return Data.now();
             }
         }
         //computed可以想象为缓存(第一次加载就缓存,数据不变,重新赋值后重新加载)
         //使用vm.message="123"修改数据时数据失效重新加载
     });
 </script>

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销

插槽slot -- 自定义事件

 <div id="app">
     <todo>
         <todo-title slot="todo-title" :title="title"></todo-title>
         <todo-items slot="todo-items" :v-for="(index,item) in items" :item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
     </todo>
 </div>  
 <script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.min.js"></script>
 <script>
     //slot:插槽(类似于模板)
     Vue.component("todo",{
         template: ‘<div>                         <slot name="todo-title"></slot>                         <ul>                             <slot name="todo-items"></slot>                         </u1>                    </div>‘
     });
     Vue.component("todo-title",{
         props: [‘title‘],
         template: "<div>{{title}}</div>‘
     });
     Vue.component("todo-items",{
         props: [‘item‘,‘index‘],
         template: ‘<li>{{item}}<buttom @click="remove">删除</buttom></li>‘,
         methods: {
             //只能绑定当前组件的方法
             remove: function(index) {
                 //this.$emit  自定义事件分发
                 this.$emit(‘remove‘,index)
             }
         }
     });
     var vm = new Vue({
         el: "#app",
         data: {
             title: "title",
             todoItems:[‘Java‘,‘前端‘,‘Linux‘]
         },
         methods: {
             removeItems:function(index){
                 this.todoItems.splice(index,1); //删除指定下标
             }
         }
     });
 </script>

3.

Vue-cli

环境配置

 #安装NodeJs
 ?
 #==============cmd==============
 #检查
 node -v
 npm -v
 #==============环境==============
 #安装阿里云镜像( -g 全局安装)
 npm install cnpm -g
 #或使用如下语句解决npm速度慢的问题
 npm install --registry=https://registry.npm.taobao.org
 #安装位置  C:\Users\用户名\AppData\Roaming\npm
 ?
 #安装vue-cli
 cnpm install vue-cli -g
 #测试
 vue list
 #============创建项目============
 #创建一个基于webpack模板的vue应用程序,执行命令前先切到想要创建程序的路径,myvue为项目名
 vue init webpack myvue
 ‘
 Project name:项目名称，默认回车即可
 Project description:项目描述，默认回车即可
 Author:项目作者，默认回车即可
 Install vue-router:是否安装vue-router,选择n不安装(后期需要再手动添加)
 Use ESLint to lint your code:是否使用ESLint做代码检查,选择n不安装(后期需要再手动添加)
 Set up unit tests:单元测试相关,选择n不安装(后期需要再手动添加)
 Setup e2e tests with Nightwatch:单元测试相关,选择n不安装(后期需要再手动添加)
 Should we run npm install for you after the project has been created:创建完成后直接初始化,选择n,我们手动执行;运行结果!
 ‘
 #初始化并运行
 cd myvue
 npm install
 npm run dev
 #ctrl+c关闭
 ?
 #===========安装webpack===========
 npm install webpack -g
 npm install webpack-cli -g

 #进入工程目录
 cd hello-vue
 #安装vue-router
 npm install vue-router --save-dev
 #安装element-ui
 npm i element-ui -s
 #安装依赖
 npm install
 #安装SASS 加载器
 cnpm install sass-loader node-sass --save-dev
 #启动测试
 npm run dev
 #I

Vue-router路由

. . .

Vue_初识

码农公寓

Vue

推荐浏览官方文档 : https://v3.cn.vuejs.org/guide/conditional.html

1. 概念

2. 基础

条件渲染

事件v-on

数据双向绑定input

组件component

网络通信axios

计算属性computed

插槽slot -- 自定义事件

3.

Vue-cli

Vue-router路由

. . .

相关文章