一、vue的编写步骤

　　

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        //1.0与2.0是有区别的，但是

        <script src="../libs/vue1026.js"></script> //1.引入的1.0的包

        <script src="../libs/vue221.js"></script> //1.引入的2.0的包

    </head>

    <body>

        <div id="app">  //引入的包一定要确定一个范围表明这个范围的指令都是被vue来解析

            {{msg}}

        </div>

    </body>

    <script>

    //通过vue实例化一个对象，用这个对象来解析id=app中的指令

        new Vue({

            el:"#app", //表示vm对象将来操作的view的区域是app的这个div中的所有指令

            data:{

                msg:"hello world" //称为为mvvm中的model

            }

        })

    </script>

</html>

二、常用指令

　　1.插值表达式{{}}

　　　　这是数据常用的形式就是使用"Mustache"语法(双大括号)的文本插值，Mustache标签将会被替代为对应数据对象msg属性(定义在data中的值)

　　　　例如：

　　　　　　<span>{{mag}}</span>

　　　　对javascript表达式的支持

　　　　例如:

　　　　　　{{1+1}}

　　　　　　{{ok?'yes':'no'}} //只支持三元表达式不支持if判断

　　　　但是只能绑定单个表达式

　　2.v-text和v-html的指令

　　共同点:都是将一个变量渲染到制定的表达式中

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>
　　<script src="../libs/vue1026.js"></script>

</head>

<body>

<div id="app">

    {{name}}

    <span v-text="name"></span>

    <span v-html="name"></span>

</div>

</body>

<script src="./libs/vue221.js"></script>

<script src="./libs/vue1026.js"></script>

<script>

    var vm = new Vue({

        el:"#app",

        data:{

            name:"<span>黑马程序员</span>" 
　　} }) 

</script> 
</html>
输出结果：

<span>黑马程序员</span>

黑马程序员

　　不同点:v-html会解析标签而v-text则不会

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../libs/vue1026.js"></script>

</head>

<body>

<div id="app">

    <span v-text="name"></span>

    <br />

    <span v-html="name"></span>

</div>

</body>

<script src="./libs/vue221.js"></script>

<script src="./libs/vue1026.js"></script>

<script>

    var vm = new Vue({

        el:"#app",

        data:{

            name:"<h1>黑马程序员</h1>"

        }

    })

</script>

</html>
输出结果：

<h1>黑马程序员</h1>

黑马程序员

vue基础一的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  4. python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  5. Vue 基础精讲

    Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...

  6. Vue基础以及指令

    Vue 基础篇一   一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...

  7. 2-5 vue基础语法

    一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...

  8. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  9. vue基础知识之vue-resource/axios

    Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...

  10. Vue基础及脚手架环境搭建

    From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...

随机推荐

  1. 使用mongodb作为Quartz.Net下的JobStore实现底层的持久化机制

    我们都知道默认的Quartz底层采用的是RAMJobStore,所有的Job,Trigger,Calendar都是用Dictionary,SortSet等等这样的数据结构进行储存,相对来说性能肯 定快 ...

  2. <canvas合成海报>所遇问题及解决方案总结

    最近做了一个用canvas合成海报图片的移动端项目,由于一点canvas基础都没有,所以去网上搜了一位前辈的demo,但是开发过程中遇到了很多问题,现将所遇问题及解决方法总结如下: 1.移动端canv ...

  3. Swift 路由机制设计

    设计模式 APP设计模式多种多样,从最初的MVC到MVVM,再到MVP,VIPER等.越来越多的设计模式被开发出来并得以应用,但不论我们用到哪种设计模式,只需要记住高内聚.低耦合那边是好的设计模式.在 ...

  4. 10.解决VUEX刷新的时候出现数据消失

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

  5. Linux常见命令（三）

    今天我们来介绍第三个命令:pwd. Linux中用 pwd 命令来查看”当前工作目录“的完整路径. 简单得说,每当你在终端进行操作时,你都会有一个当前工作目录. 在不太确定当前位置时,就会使用pwd来 ...

  6. Pandas数据处理实战：福布斯全球上市企业排行榜数据整理

    手头现在有一份福布斯2016年全球上市企业2000强排行榜的数据,但原始数据并不规范,需要处理后才能进一步使用. 本文通过实例操作来介绍用pandas进行数据整理. 照例先说下我的运行环境,如下: w ...

  7. Java 多态透析 详细理解

    1:什么是多态 一个对象的多种状态 (老师)(员工)(儿子) 教师 a =老钟; 员工 b =老钟; 2:多态体现 父类引用变量指向了子类的对象          Father f = new Son ...

  8. （转）基于 Token 的身份验证

    原文:https://ninghao.net/blog/2834 最近了解下基于 Token 的身份验证,跟大伙分享下.很多大型网站也都在用,比如 Facebook,Twitter,Google+,G ...

  9. Vue.js学习笔记（三） - 修饰符

    本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点“.”连接修饰符名 ...

  10. 使用random输出10个double型的随机数

    使用random输出10个double型的随机数 代码如下: package Day05;import java.util.Random;import java.util.Scanner; publi ...