vue 基础指令

<body>
<div id="app">
<!--vue的指令directive 所有指令都已v-开头-->
<!--input value属性默认会被vue忽略掉selected checked-->
<input type="text" name="name" value="" v-model="msg" />

<!--v-model 双向绑定 会将msg的值绑定到输入框 输入框改变会影响数据-->
<label v-text="msg"></label>
<!--v-text 其实就是{{}}-->

<div v-once>{{msg}}</div>
<!--v-once-->

<div v-html="p" >{{p}}</div>
<!--v-html-->
</div>
<script>
//引入后会得到vue的构造函数
var vm = new Vue({ //vm就是viewmodel
el:‘#app‘, //告诉vue能管理哪个dom
data: { //data中的数据会被vm代理
msg: ‘hello‘, //可以通过vm.msg取到对应内容
p:‘<h1>hello</h1>‘
}
});
</script>
</body>

原文地址:https://www.cnblogs.com/yagamilight/p/11067315.html

时间: 2024-08-29 12:00:23

vue 基础指令的相关文章

Vue基础指令

一 Vue框架简介 Vue是一个构建数据驱动的web界面的渐进式框架. 目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件 1 <div id="app"> 2 <span>你的名字是{{name}}</span> 3 </div> 4 var app=new Vue({ 5 el: '#app', 6 data:{ 7 name:'wdb' 8 } 9 }) 二 Vue指令 Vue的指令directives很像我们所说的自

vue基础指令学习

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--定义挂载vue对象的div--> <div id="app"> <todo-list></todo-lis

Vue基础指令集锦

v-model双向绑定数据 <input type="text" v-model="msg"> {{msg}} ###v-on 事件 <div id="box"> <button v-on:click="say">按钮</button> <button @click="say">按钮</button> </div> <

0807 创建vue实例以及vue的基础指令

lession1 1.Vue的了解 渐进式框架   作者:尤雨溪     mvvm 2.创建vue实例 引入<script src="vue.js"><script> <body> <div id="myApp"> </div> </body> <script> new Vue({ el:"#myApp",// 挂载 data:{// 是你的数据状态. str:&

Vue基础(环境配置、内部指令、全局API、选项、内置组件)

1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装完成后在命令行执行以下命令查看npm包管理器版本 npm -v npm中文文档:https://www.npmjs.cn/ 配置淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org 然后执行 cnpm -v 查看版本信

vue学习指南:第二篇(详细Vue基础) - Vue的指令

一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. 绑定数据 2. dom检测 3. vue 实例 靠 new 关键字实例化 vue 对象,使用 mvvm 模型 1. M modal 数据 2. v view 视图 3. vm 全称viewmodal 就是一个vue实例 4. Vue.js 是封装的一个类,参数是个 options 对象 最常用的属性

vue基础特性

在这里我们主要是讲解一些vue实例的属性和一些基础的指令 vue实例属性: 其实和我们之前所学的对象的属性是相似的东西 vue的基础指令: 对于指令,大家可能之前么有接触过相关的概念,其实大家可以这样理解 指令: 可以看做是命令,在vue中我们可以通过指令来完成相关的操作:在vue中以v-开头,后面紧跟具体的操作命令 一些基本的指令: v-once: 只绑定一次 v-bind: 绑定数据 v-model: 绑定模型 v-on: 绑定事件 v-if v-show: 条件渲染方法:使用methods

vue基础语法

vue基础语法 vue官网链接:https://cn.vuejs.org/  一.Vue简介 Vue.js 是一个用于创建 Web 交互界面的库.它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件. Vue.js是一款轻量级的.以数据驱动构建web界面的前端JS框架,它在架构设计上采用了MVVM(Model-View-ViewModel)模式,其中ViewModel是Vue.js的核心,它是一个Vue的实例,而这个实例又作用域页面上的某个HTML元素. 其核心在于通过数据驱动界面的更新

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:给博客首页加花样(二)

回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码的学习,简单的通过一些假的数据来展示了下个人博客的首页列表,不知道大家是否还记得昨天讲的什么,如果不太清楚呢,可以再回顾下<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页(一)>,我们主要说到了,Vue的核心语法是什么,MVVM