vue入门 0 小demo (挂载点、模板、实例)
vue入门 0 小demo (挂载点、模板)
用直接的引用vue.js
首先 讲几个基本的概念
1、挂载点即el：vue 实例化时 元素挂靠的地方。
2.模板 即template：vue 实例化时挂载点 下赋值的模板。
3.赋值时 的符号 有 插值表达式 {{msg}} 、 v-text="msg" 、v-html="msg" 类似于css 的写法
4.实例 即数据：data:{msg:'hello world!'}
4.事件表示：v-on:click="handleclick" ，vue 指令点击时的方法handleclick， v-on:click 简写@click
methods: { handleclick:function () { this.msg='world';} }
5. 属性绑定 v-bind 简写:bind or : v-bind:title="title1"
下面为代码
效果为：显示 hello world ,点击时 变为world
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/vuejs/vue.js"></script> </head>
<body>
<div id="app"> <!--挂载点-->
<!-- <p>{{msg}}</p> --><!--模板--> <!--{{msg}} 为插值表达式 == v-text='msg' v-html="msg"-->
<!-- <p v-text="msg"></p> -->
<!-- <p v-html="msg"></p> -->
<div v-on:click="handleclick">{{msg}}</div>
</div>
</body>
<script>
new Vue({
el:'#app',
// template:'<p>{{msg}}</p>',
data:{
msg:'hello world!'
},
methods: {
handleclick:function () {
this.msg='world';
}
},
});
</script>
</html>
02属性和双向绑定
知识点：v-bind:title 、v-model
显示效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/vuejs/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <div title="this is hello world">{{msg}}</div> -->
<!-- <div title="this is hello world">{{msg}}</div> -->
<div v-bind:title="title1">{{msg}}</div> <!--数据项属性绑定 :bind=v-bind: -->
<div :title="title">{{msg}}</div> <!--数据项属性绑定 :bind=v-bind: -->
<input v-model="content"/>
<div>{{content}}</div>
</div>
<script>
new Vue({
el:'#app',
template:'',
data:{
msg:'hello world',
title1:'this is hello world',
content:'世界你好！'
},
methods: {
},
});
</script>
</body>
</html>
vue入门 0 小demo (挂载点、模板、实例)的更多相关文章
- react比较入门的小demo
什么是jsx? JSX是JavaScript XML 这两个单词的缩写,xml和html非常类似,简单来说可以把它理解成使用各种各样的标签,大家可以自行 百度.所以jsx就是在javascri ...
- 【vue入门】日志demo，增删改查的练习（无vuex版本）
安装 1. 确定电脑已装node和npm 出现版本号则说明电脑已经安装好node和npm2. 创建一个基于webpack的项目 3. 在项目里安装依赖 4. 运行 配置路由为了动态渲染各个页面的组 ...
- vue入门之创建第一个实例，挂载点、模板和实例之间的关系
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 一个基于ES6+webpack的vue小demo
上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...
- 一个基于ES5的vue小demo
由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...
- Vue.js之组件嵌套小demo
Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...
- Vue 2.0入门基础知识之全局API
3.全局API 3-1. Vue.directive 自定义指令 Vue.directive用于自定义全局的指令 实例如下: <body> <div id="app&quo ...
- 新手入门指导：Vue 2.0 的建议学习顺序
起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...
- vue入门(二)----模板与计算属性
其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...
随机推荐
- Vue 子组件与子组件之间传值
可以借用公共父元素.子组件A this.$emit("eventName", data) 触发事件,父组件监听事件,更改父组件 data , 通过Props 传值到子组件B,子组 ...
- Java日志体系（七）日志框架切换
通过 SLF4J 统一日志 在实际的日志转换过程中,SLF4J其实是充当了一个中介的角色.例如当我们一个项目原来是使用LOG4J进行日志记录,但是我们要换成LogBack进行日志记录. 此时我们需要先 ...
- Python 常用模块(1) -- collections模块,time模块,random模块,os模块,sys模块
主要内容: 一. 模块的简单认识 二. collections模块 三. time时间模块 四. random模块 五. os模块 六. sys模块 一. 模块的简单认识 模块: 模块就是把装有特定功 ...
- react 添加 react-redux 基本用法
安装 yarn add react-redux 创建文件.文件夹 |- redux |- actions.js |- reducer.js |- store.js actions.js export ...
- cmake 在mac系统的安装
CMake是一个比make更高级的跨平台的安装.编译.配置工具,可以用简单的语句来描述所有平台的安装(编译过程).并根据不同平台.不同的编译器,生成相应的Makefile或者project文件.本文主 ...
- bash-1 初始化CentOS系统的初始化脚本
初始化CentOS系统的初始化脚本 #!/bin/bash # #******************************************************************* ...
- 论文阅读 | Tackling Adversarial Examples in QA via Answer Sentence Selection
核心思想 基于阅读理解中QA系统的样本中可能混有对抗样本的情况,在寻找答案时,首先筛选出可能包含答案的句子,再做进一步推断. 方法 Part 1 given: 段落C query Q 段落切分成句 ...
- udb主从不同步排错
Last_SQL_Errno:1032Last_SQL_Error:Could not execute Update_rows event on table oride_data.data_syste ...
- 【Python】【demo实验5】【练习实例】【多个数字组合成不重复三位数】
题目:有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? 程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. 程序源代码 ...
- [转帖]docker容器保持运行不退出
docker容器保持运行不退出 2019年01月20日 23:21:22 chvalrous 阅读数 1511 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...