vue入门简介

最新推荐文章于 2020-07-19 23:53:42 发布

迹然

最新推荐文章于 2020-07-19 23:53:42 发布

阅读量125

点赞数

分类专栏：前端文章标签： vue入门

本文链接：https://blog.csdn.net/weixin_42199230/article/details/101023232

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、总结一下v-text和v-html和插值表达式的差别。

 插值表达式和v-text不能够解析html标签，v-html能够解析html标签

2、完成创建一个vue对象并和id是app的div进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
	<p v-text="msg"></p>
	<p v-html="msg"></p>
    </div>
    <script src="js/vue.js"></script>
    <script >
       
        var m=new Vue({
            el:"#app",
            data:{
                msg:"你好世界",
                
            }

        });
    </script>
</body>
</html>

3、什么是MVVM模式，这样设计有什么优点。

1、MVVM是什么？

MVVM是Model-View-ViewModel的简写
它本质上是MVC 的改进版
MVVM（Model-View-ViewModel）框架的由来是MVP

（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架

2、MVVM优点

MVVM模式和MVC模式一样，主要

目的是分离视图（View）和模型（Model），有几大优点
低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定

到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变

可重用性：你可以把一些视图逻辑放在一个

ViewModel里面，让很多view重用这段视图逻辑

独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专

注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码

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

ViewModel来写

4、使用vue将下列data中cat记录显示插入到页面之中

<div id="app">
        <p>{{cat}}</p>
        
    </div>
<script src="js/vue.js"></script>
var vm = {
	el: '#app',
	data: {
		cat: {
			name: '罗小黑',
			age: 18,
			desc: '是一只黑色的猫'
		}

迹然

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门简介

1、总结一下v-text和v-html和插值表达式的差别。插值表达式和v-text不能够解析html标签，v-html能够解析html标签2、完成创建一个vue对象并和id是app的div进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值。<!DOCTYPE html><html lang="en">&lt...
复制链接

扫一扫