您的位置: 首页  >  文章  >  Vue学习（一）

Vue学习（一）

分类: 文章 • 2025-01-07 17:39:34

目录

Vue概念

  1. github站点：
  2. 在线文档:

渐进式JavaScript框架

Vue包含两部分：核心库和插件。
核心库可以做一些基本的功能，但是真正项目使用核心库并不满足需求的使用，就需要相应的插件。比如：路由，就需要路由插件。状态管理，就需要状态管理插件。需要什么，就加入什么。Vue将这样的做法命名为：渐进式，作为一个Vue的概念。其实React的使用也是这样的。

Vue 扩展插件

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

作用：

Vue的作用和React一样，动态构建用户界面。

作者：

vue作者：尤雨溪，前谷歌（Google）工程师。

Vue的特点

Angular提出：模版语法和数据绑定。React提出：组件化和虚拟DOM。 尤雨溪把这些特点结合起来，开发了Vue框架。

  1. 遵循 MVVM 模式
  2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
  3. 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目

与其它前端 JS 框架的关联

  1. 借鉴 angular 的模板和数据绑定技术
  2. 借鉴 react 的组件化和虚拟 DOM 技术

Vue指南

Vue的浏览器插件

  Vue.js devtools.crx可以调试Vue。

简单示例

下载vue.js文件，新建html引入该文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue练习</title>
    <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
    {{msg1}}
  </div>
  <script>
    var app = new Vue({
      el:'#app',
      data:{
        msg:'Hello World'
      }  
    })
  </script>  
</body>
</html>

运行结果：
Vue学习（一）

MVVM模式

Vue遵循MVVM模式。
Vue学习（一）
VM的实现做了很多工作，首先是对页面dom元素事件监听，然后做数据绑定。

  1. View ：Vue的模版是视图，就是模版页面。
  2. Model：Vue的模型就是数据对象（也就是data）
  3. ViewModel：Vue的视图模型就是vm（也就是vue的实例）即：
   var vm = new Vue( 
      el:'#app',
      data:{
        msg:'Hello World'
      }  
    });

这个实例vm完成了：DOM监听（DOM Listener）和数据绑定（Data Bindings）

声明式编程

加入在输入框中输入数据，页面数据随即发生变化。我们要用vue实现这个效果，直接在模版里面大括号表达式，定义data然后就行了。至于内部怎么实现的，DOM监听和数据绑定怎么实现的不需要我们去关心。这种编程称为：声明式编程。
声明式编程：按照别人的语法去做一些声明的定义，去写一些特定的代码。

命令式编程

实现一些业务，整个的流程和细节都要手写去实现。这样的编程叫：命令式编程。就像用原生js去做页面的效果和数据验证等等，就是命令式编程。

模版语法

模版的理解

模版：是动态的HTML，包含了一些js的代码。模版用双大括号表示。在vue里面还提供了指令，以v-开头的自定义属性标签表示。

  {{msg}}
   <p v-text="msg"></p>

双大括号表达式

也叫：Mustache语法。

语法：{{exp}}

功能：向页面输出数据，可以调用对象的方法。

指令

指令 指令描述
v-text 给比标签添加显示文本
v-html 会尽量把标签解析成html
v-bind 绑定属性值，也可以直接在属性值前加’：’，效果一样
v-on 绑定事件，也可以直接在事件前加’@’，效果一样
v-show 控制标签显示
v-if 流程控制
v-else-if 流程控制
v-else 流程控制
v-for 指令基于数组呈现项目列表，迭代对象的属性。
v-model v-model 只是语法糖而已实现数据双向绑定。
v-model 不仅仅能在 input上用，在组件上也能使用
v-once 只渲染元素和组件一次。
随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。 
  <p>{{msg}}</p>
  <p v-text="msg"></p>//这两个效果一直，msg里面如果有标签不会被解析
  <p>{{msg}}</p>
  <p v-html="msg"></p>//msg里面如果有标签会被解析
  <img v-bind:src="imgUrl"/>
  <img :src="imgUrl"/>//两种写法有相同的效果
  <button v-on:click="test">点击事件</button>
  <button @click="test">点击事件</button>
  <h1 v-show="seen">你能看到我.</h1>
  <input type="text" v-model.lazy="msg">
  <template v-if="seen">
       <h2>12345678</h2>
       <h3>12345678</h3>
       <p>1234567</p>
  </template>
  <h1 v-if="seen=='A'">当前seen值为A</h1>
  <h1 v-else-if="type === 'C'">当前seen值为C</h1>
  <h1 v-else="seen=='B'">当前seen值为其他</h1>
   <ul>
      <li v-for="n in 10" v-if="n<5">{{n}}</li>
   </ul>
   <!--数组和对象两参数  -->
   <!--数组：  -->
  <ul>
    <li v-for="(item,index) of arr">{{index}}-----{{item}}</li>    
  </ul>
  <ul>
    <li v-for="(value,key,index) of obj">{{index}}--{{key}}:{{value}}</li>
 </ul> 
 <!-- 在“change”时而非“input”时更新 -->
 <input v-model.lazy="msg" >
 <h1 v-once>{{msg}}</h1>
  <script>
    var app = new Vue({
        el:'#app',
        data:{
            msg:'这里是·······',
            imgUrl:"https://images2017.cnblogs.com/blog/882926/201711/882926-20171115175942921-775941263.png",
            seen:true,
            arr:['WEB','UI','PHP','JAVA','PYTHON'],
	        obj:{
	          name:'jsx',
	          age:18,
	          sex:'man'  
	        }
        },
        methods:{
            test(){
                alert("点击事件执行。");
            }
        }
    })
  </script>

相关推荐