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

简介: Vue主要的就是MVVM的实现,它既实现了Anguler的模块化开发,又实现了React的虚拟DOM,但是作为一个后端开发人员,我们只要求会用就可以,并不用去了解ES6标准、Node.js啥的,在这里就Vue简单的一些操作进行梳理一下。

什么是 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 层通过接口请求进行数据交互


这里引用一下官网的图:

20200706171603392.jpg

在 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" />&nbsp;&nbsp;单行文本是:{{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>&nbsp;&nbsp;多行文本是:{{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">&nbsp;&nbsp;<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 事件。因此,更推荐像上面这样提供一个值为空的禁用选项。

结尾

好了 就先到这里了,我还会慢慢的向里面进行补充,十分感谢尤雨溪能够创造出这么好的前端框架,前阵子了解前端的时候就认识了他,同时也知道了刚去世不久的司徒正美,哎,一代才子的陨落呀

相关文章
|
1天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
1天前
|
缓存 JavaScript UED
Vue 中异步加载模块的方式
【10月更文挑战第23天】这些异步加载模块的方式各有特点和适用场景,可以根据项目的需求和架构选择合适的方法来实现模块的异步加载,以提高应用的性能和用户体验
|
1天前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
2天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
5天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
2天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
20 9
|
5天前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
15 7
|
1天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。
|
5天前
|
JavaScript 前端开发 开发者
Vue 的优缺点
【10月更文挑战第16天】Vue 具有众多优点,使其成为前端开发中备受青睐的框架之一。尽管它也存在一些局限性,但通过合理的应用和技术选型,这些问题可以得到一定程度的解决。在实际项目中,开发者可以根据项目的需求和特点,权衡 Vue 的优缺点,选择最适合的技术方案。同时,随着 Vue 不断的发展和完善,相信它将在前端开发领域继续发挥重要作用。
13 6
|
5天前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
16 6