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 (挂载点、模板、实例)的更多相关文章

  1. react比较入门的小demo

    什么是jsx?    JSX是JavaScript  XML 这两个单词的缩写,xml和html非常类似,简单来说可以把它理解成使用各种各样的标签,大家可以自行 百度.所以jsx就是在javascri ...

  2. 【vue入门】日志demo，增删改查的练习（无vuex版本）

    安装 1. 确定电脑已装node和npm 出现版本号则说明电脑已经安装好node和npm2. 创建一个基于webpack的项目   3. 在项目里安装依赖 4. 运行 配置路由为了动态渲染各个页面的组 ...

  3. vue入门之创建第一个实例，挂载点、模板和实例之间的关系

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  5. 一个基于ES5的vue小demo

    由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...

  6. Vue.js之组件嵌套小demo

    Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...

  7. Vue 2.0入门基础知识之全局API

    3.全局API 3-1. Vue.directive 自定义指令 Vue.directive用于自定义全局的指令 实例如下: <body> <div id="app&quo ...

  8. 新手入门指导：Vue 2.0 的建议学习顺序

    起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...

  9. vue入门(二)----模板与计算属性

    其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...

随机推荐

  1. powerdesigner使用遇到的一些问题

    1.数据库逆向生成er图时,连接数据库问题 由于powerdesigner版本是32位,可能就导致不兼容64位的机器,导致连接mysql失败: 解决方法:方法1.重新配置32位jdk 方法2.mysq ...

  2. Kafka消息流处理

  3. java设计模式中的动态代理

    Java的三种代理模式 1.代理模式 代理(Proxy)是一种设计模式,提供了对目标对象另外的访问方式;即通过代理对象访问目标对象.这样做的好处是:可以在目标对象实现的基础上,增强额外的功能操作,即扩 ...

  4. CentOS8 使用 aliyun 阿里云 镜像站点的方法

    CentOS8现已可使用国内的aliyun阿里云镜像站,方法如下: 用cd命令切换到yum.repos目录,备份原始的3个repo文件:cd /etc/yum.repos.d/sudo cp Cent ...

  5. vue/cli 3.0配置NODE_ENV

    原文地址 在项目开发中我们需要配置环境变量,开发环境,生产环境和测试环境.在cli 2.0的版本中我们是通过在config文件夹进行配置的,vue/cli 3.0相对简单,只需要在项目根目录创建.en ...

  6. 20190925 - 使 macOS 的 rm 命令删除到回收站的不完美办法

    今天使用 macOS 时,使用 rm 删除了一个不重要文件,为保证以后不删除重要文件,找到一个让 rm 命令更安全的办法. 使用 MacPorts 安装 rmtrash 命令. sudo port i ...

  7. linux 中的命令是什么?执行命令的几种方式？如何自己创建命令？

    linux 中的命令是什么? 命令是可执行的二进制程序 执行命令的几种方式? ./test.sh                     #相对路径执行 /data/test.sh           ...

  8. Docker 面试题

    Docker 面试题 Docker? Docker是一个容器化平台,它以容器的形式将您的应用程序及其所有依赖项打包在一起,以确保您的应用程序在任何环境中无缝运行. CI(持续集成)服务器的功能是什么? ...

  9. git 命令 git status add rm commit mv

    1.查看 git 仓库文件改动状态 Git 仓库内文件改动有 4 种状态,除了 Unmodified 状态的文件因为并未改动默认没有状态不做显示之外,其他文件改动状态都可以通过 git status ...

  10. 企业场景-网站目录安全权限深度讲解及umask知识

    站点目录的文件和目录给什么权限: 默认权限是安全权限的临界点,工作中尽量给这个临界点,或者小于临界点,不要大于临界点权限. 默认权限分配的命令 umask 在linux下文件的默认权限是由umask值 ...