一、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. zoom与scale的异同

    zoom与scale的异同点 作为一名前端,尤其是页面要兼容ie浏览器的前端,肯定对着两个属性都很熟悉. zoom和scale都是css中常用的放大和缩小一个元素的方法,在scale还没有成为css3 ...

  2. Streaming输入输出

    Structured Streaming 输入输出 输入 SparkSession.readStream() 返回一个 DataStreamReader 接口对象,可以通过该对象对输入源进行参数配置, ...

  3. php7 安装yar 生成docker镜像

    Docker包含三个概念:(1)远程仓库即远程镜像库所有镜像的聚集地(不可进入操作).(2)本地镜像即从远程仓库拉取过来的镜像(3)运行起来的本地镜像叫做容器(分层的可操作)Docker使用:1.首先 ...

  4. 【Android Developers Training】 6. 配置Action Bar

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  5. 【Android Developers Training】 17. 停止和重启一个Activity

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  6. 容器如何访问外部世界？- 每天5分钟玩转 Docker 容器技术（36）

    前面我们已经解决了容器间通信的问题,接下来讨论容器如何与外部世界通信.这里涉及两个方向: 容器访问外部世界 外部世界访问容器 容器访问外部世界 在我们当前的实验环境下,docker host 是可以访 ...

  7. ASP.NET MVC5+EF6+EasyUI 后台管理系统（85）-Quartz 作业调度用法详解二

    前言 上一节我们学习了Quartz的基本用法 这一节学习通过XML配置的形式来执行任务 这一节主要认识一些属性,为下一步打基础 代码下载:链接:http://pan.baidu.com/s/1ge6j ...

  8. Spring MVC 项目搭建 -3- 快速 添加 spring security

    Spring MVC 项目搭建 -3- 快速 添加 spring security 1.添加 spring-sample-security.xml <!-- 简单的安全检验实现 --> & ...

  9. H5编辑器核心算法和思想-遁地龙卷风

    代码和特性在chrome49下测试有效. 文本渲染的本质是对文本节点的渲染,通过浏览器内置的对象Range可以获得选择的起始点.与终止点   var range = getRangeObject(); ...

  10. C#语法糖演进-C#语言和.NET Framework平台介绍

    p { font-size: 14px; text-indent: 2em } .title { text-indent: 0; font-size: 22px; font-weight: bold; ...