Vue学习之Vue原理与Vue基础语法、事件标签总结

原创

可为编程 2023-12-09 18:56:28 博主文章分类：前端知识 ©著作权

文章标签 vue javascript js web MVVM Demo for WPF 文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者可为编程的原创作品，请联系作者获取转载授权，否则将追究法律责任

什么是 MVVM

Vue主要的就是MVVM的实现，它既实现了Anguler的模块化开发，又实现了React的虚拟DOM，但是作为一个后端开发人员，我们只要求会用就可以，并不用去了解ES6标准、Node.js啥的，在这里就Vue简单的一些操作进行梳理一下。
MVVM（Model-View-ViewModel）是一种软件架构设计模式，由微软 WPF（用于替代 WinForm，以前就是用这个技术开发桌面应用程序的）和 Silverlight（类似于 Java Applet，简单点说就是在浏览器上运行的 WPF）的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由 John Gossman（同样也是 WPF 和 Silverlight 的架构师）于 2005 年在他的博客上发表。

MVVM 源自于经典的 MVC（Model-View-Controller）模式（期间还演化出了 MVP（Model-View-Presenter）模式）。MVVM 的核心是 ViewModel 层，负责转换 Model 中的数据对象来让数据变得更容易管理和使用，其作用如下：

该层向上与视图层进行双向数据绑定
向下与 Model 层通过接口请求进行数据交互

这里引用一下官网的图：

Vue学习之Vue原理与Vue基础语法、事件标签总结_web

在 MVVM 架构中，是不允许数据和视图直接通信的，只能通过 ViewModel 来通信，而 ViewModel 就是定义了一个 Observer 观察者

这里这我们引用了开发环境版本，采用Sublime来进行操作。我们没有使用vue-cli，因为是基础知识点梳理，所以并没有直接采用开发方式，后面我会再更新一个博客介绍一下vue-cli

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

第一个Vue

接下来我们就来进行实操，首先第一个Vue项目：

<body>
<div id="app"> {{message}}</div>
</body>
</html>
<script type="text/javascript">
var app = new Vue({
    el:"#app",
    data:{
      message:"Hello World!"
    }
});

</script>

这里的
el：是绑定元素的id
data:在数据对象data中有一个message的属性并设置初始值
_注意：
在这里我还是比较推荐在js中运用单引号，在java中用双引号，因为双引号可以使用转义字符，同时单引号在JS中被浏览器（IE，Chrome，Safari）编译的速度更快（在FireFox中双引号更快）

v-if与v-else

这是判断语句，和if/else是相同的作用。

<span v-if="message">Yes</span>
<span v-else>No</span>

</div>

</body>
</html>
<script type="text/javascript">

var app = new Vue({
    el:"#app",
    data:{
      message:true
    }

});

注意：这里v-else是不需要等于任何属性值的。

v-else-if

连续条件判断语句

<body>
  
<!--连续条件判断语句 -->
<div id="app"> 

<span v-if="message === '尤'">尤</span>
<span v-else-if="message === '雨'">雨</span>
<span v-else-if="message === '溪'">溪</span>
<span v-else>很厉害</span>
</div>
</body>
</html>
<script type="text/javascript">
var app = new Vue({
    el:'#app',
    data:{
      message:'xx'
    }
});

</script>

_注意：
在这里 === 是全等， == 在判断两个值是否相同的时候会先判断数据类型是否一致，如果如果数据类型一致，才继续判断内容是否相同 ==判断的时候，会忽略数据类型，直接判断内容
js中用undefined和null用 == 判断就是相等的，用 === 判断则是不相等的。

v-for循环遍历

body>
  
<!--创建第一个Vue程序 -->
<div id="app"> 

<span v-for="item in items">
  
  <li>{{item.message}}</li>
  
</span>

</div>

</body>
</html>
<script type="text/javascript">

var app = new Vue({
    el:'#app',
    data:{
      items:[
          {message:'尤雨溪'},
          {message:'很厉害'}
      ]
    }

});

</script>

注意： items 是源数据数组并且 item 是数组元素迭代的别名
这里data会自动忽略掉，所以直接遍历items就可以。

v-on监听事件

<body>
  
<!--创建第一个Vue程序 -->
<div id="app"> 

<button v-on:click="sayHi">点击</button>

</div>

</body>
</html>
<script type="text/javascript">

var app = new Vue({
    el:'#app',
   data:{   
      message:'Hello'
   },
    methods:{
        sayHi:function(event){
          //event: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.事件通常与函数结合使用，函数不会在事件发生前被执行！
        alert(this.message);//this指的是Vue实例
    }

  }



});

</script>

在这里我们使用了 v-on 绑定了 click 事件，并指定了名为 sayHi 的方法

v-model

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

单行文本

<div id="vue">
    单行文本：<input type="text" v-model="message" />  单行文本是：{{message}}
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            message: "Hello Vue"
        }
    });
</script>

vue多行文本

<div id="vue">
    多行文本：<textarea v-model="message"></textarea>  多行文本是：{{message}}
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            message: "Hello Textarea"
        }
    });
</script>

vue单复选框

<div id="vue">
    单复选框：<input type="checkbox" id="checkbox" v-model="checked">  <label for="checkbox">{{ checked }}</label>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            checked: false
        }
    });
</script>

多复选框

<div id="vue">
    多复选框：
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <span>选中的值: {{ checkedNames }}</span>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            checkedNames: []
        }
    });
</script>

vue单选按钮

<div id="vue">
    单选按钮：
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <span>选中的值: {{ picked }}</span>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            picked: ''
        }
    });
</script>

vue下拉框

<div id="vue">
    下拉框：
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>选中的值: {{ selected }}</span>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            selected: ''
        }
    });
</script>

注意： 如果 v-model 表达式的初始值未能匹配任何选项，元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。