Vue入门常用指令

一.Vue 介绍

? Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二.使用方法

下载到本地引用：

? 开发版： https://cn.vuejs.org/js/vue.js

? 生产版：https://cn.vuejs.org/js/vue.min.js

在线引用：

npm安装:

// 最新稳定版
npm install vue
// 安装vue-cli脚手架构建工具
npm install --global vue-cli

官网：https://cn.vuejs.org/

三.vue入门指令

vue实例创建


		
		

			
			{{msg}}

注意：vue 表达式语法是两个花括号{{msg}} 里面写实例中对应的数据名，数据名必须在对应的vue实例之下。

在写实例vue时 要注意 属性和 属性名之间的空格

  • 指令
    1. 本质就是自定义属性
    2. Vue中指令都是以 v- 开头

v-text指令

	
		

			
			

			
{{msg}}

v-html指令

  • 用法和v-text 相似 但是他可以将HTML片段填充到标签中

  • 可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上

  • 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。


	

		
		

		
		

		
		
{{msg}}

v-text 和 v-html相当于原生js中的 .text 和 .html 相同 是一样的性质

v-pre指令

  • 显示原始信息跳过编译过程
  • 跳过这个元素和它的子元素的编译过程。
  • 一些静态的内容不需要编译加这个指令可以加快渲染

	

		
		
{{msg}}

v-model指令

  • v-model是一个指令，限制在 、