Vue（1）

一：概述

Vue是一套用于构建用户界面的渐进式JavaScript框架，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关心视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Soc：

Html+Css+Js 视图：给用户看，刷新后台给的数据

网络通信：axios

页面跳转：vue-router

状态管理：vuex

Vue-UI：ICE

二：第一个VUE程序

<body>
  <div id="app">
      //这里直接就显示数据
    {{message}}
  </div>
<script>
    var  vm=new  Vue(
       //el绑定标签，data是指数据 
        el: "#app",// 设置当前vue对象要控制的标签范围
        data;{// data是将要展示到HTML标签元素中的数据。
            message: "hello,vue"
    });
</script>
</body>

Vue有七大对象：el，data

Vue就是一个实现了MVVM的

为什么要使用MVVM

MvvM模式和MVC模式一样，主要目的是分离视图View和模型Model，有几大好好处

·低耦合：视图View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

·可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑

·独立开发：开发人员可以专注于业务逻辑和数据的开发，设计人员可以专注于页面设计。

·可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

三：Vue的基本语法

v-bind

我们已经成功创建了一个Vue应用，看起来这跟渲染一个字符串模板非常类似，但是Vue在背后做了大量的工作。现在数据和Dom已经被建立了关联，所有东西都是响应式的。我们在控制台操作对象属性，界面也可以实时更新。

我们还可以使用v-bind来绑定元素特性。

<body>
  <div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒中查看此处动态绑定的提示信息
    </span>
  </div>
<script>
    var  vm=new  Vue(
       //el绑定标签，data是指数据
        el: "#app",
        data;{// data是将要展示到HTML标签元素中的数据。
            message: "hello,vue"
    });
</script>
</body>

你看到的v-bind等被称为指令。指令带有的前缀v-，以表示他们是Vue提供的特殊特征。可能你已经猜到了，他们会在渲染的DOM上应用特殊的响应式行为。在这里，该指令的意思是：‘’将这个元素节点的title特性和Vue实列的message属性保持一致”

如果你再次打开浏览器的JavaScript控制台，输入app.message=‘’新消息”，就会再次看到这个绑定了title特性的html已经进行了更新。

v-if，v-else

什么是条件判断语句，就不需要我们所明了吧，一下俩个属性！

·v-if

<body>
  <div id="app">
      <h1 v-if="type==='A'">A</h1>
      <h1 v-else-if="type==='B'">C</h1>
      <h1 v-else>C</h1>
  </div>
<script>
    var  vm=new  Vue(
       //el绑定标签，data是指数据
        el: "#app",// 设置当前vue对象要控制的标签范围
        data;{// data是将要展示到HTML标签元素中的数据。
            type：'A';
    });
</script>
</body>

·v-else

<body>
  <div id="app">
      <li v-for="item  in  items">
          //这里的item in items就好比我们的for each一样，这里的item就是底下的一个
          {{item.message}}
      </li>

  </div>
<script>
    var  vm=new  Vue(
       //el绑定标签，data是指数据
        el: "#app",// 设置当前vue对象要控制的标签范围
        data;{// data是将要展示到HTML标签元素中的数据。
           items：[
            {message: '123'},
            {message: '456'},
            {message: '789'},
        ]
    });
</script>
</body>

四：Vue绑定事件

v-on

<body>
  <div id="app">
      <button v-on:click="zph">click me</button>
  </div>
<script>
    var  vm=new  Vue({
       //el绑定标签，data是指数据
        el: "#app",// 设置当前vue对象要控制的标签范围
        data：{// data是将要展示到HTML标签元素中的数据。
           message：'123'
    },
    methods: {//方法必须定义在Vue的Methods对象中，v-on事件
            zph: function (event) {
                  alert(this.message)
            }
    }
    });
</script>
</body>

Vue的7个属性，8个方法，7个指令。787原则。

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

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

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

·render属性创建真正的Virtual Dom

·watch属性 watch： function（new ，old）{} 监听data中数据的变化俩个参数，一个返回新值，一个返回旧值

五：Vue 表单双绑，组件

①.什么是双向数据绑定

Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。

值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

②为什么要实现数据的双向绑定

在vue.js中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI空间来说，对于我们处理表单，Vue.js的双向数据绑定用起来就特别舒服了。即俩者并不互斥，在全局性数据流使用单向，方便跟踪；局部性数据流使用双向，简单易操作。

③在表单中使用双向数据绑定

你可以用v.model指令在表单<input> ,<textarea>即<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以及更新数据，并对一些极端场景进行一些特殊处理。

注意：v-model 会忽略所有表单元素的value，checked，selected特性的初始值而总是将Vue实列的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。

<input>

<body>
  <div id="app">
      <input type="text" v-model="message" > {{message}}
  </div>
<script>
    var  vm=new  Vue({
       //el绑定标签，data是指数据
        el: "#app",
        data;{
           message：'123'
    },
    });
</script>
</body>

六：Vue的组件

后续+

posted @ 2021-02-24 17:23 iLisa 阅读(115) 评论(0) 编辑收藏举报

iLisa

Vue（1）

公告