一、安装

对于新手来说,强烈建议大家使用<script>引入

二、 引入vue.js文件

我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数。

三、使用Vue实例化对象

1.创建vue实例对象

<div id="app">
{{ msg }}
</div>

vue代码

var app = new Vue({
el:'#app',
data:{
msg : '你好,世界'
}
})

输出结果:

 

ok,我们已经简单的创建了第一个vue应用。渲染的数据的方式我们也叫声明式的渲染。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.msg 的值,你将看到上例相应地更新。

在上面案例中,我们学到了,{{ }}插值的语法。

{{}}插值,不仅可以插变量,只要你能想到的插入都可以,if-else不可以啊!!!

<p>{{1==1?'真的':'假的'}}</p>

data中存储的就是我们的数据属性。Vue实例还暴露了一些有用的属性和方法,它们都有前缀 $,以便与用户定义的属性区分开来

  

11-vue的使用的更多相关文章

  1. 11.vue 数据交互

    vue new Vue({ el,选择器 string/obj 不能选择html/body data, methods, template string/obj //生命周期 -- 虚拟DOM 1.初 ...

  2. 1-1 Vue的介绍

    简单介绍Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易 ...

  3. 11.VUE学习之提交表单时拿到input里的值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. 11 Vue学习 headtop

    1: HeaderTop.vue : 面包屑:el-breadcrumb 定义面包屑, separator是分隔符.       el-breadcrumb-item: 是面包屑中用 分隔符 分开的多 ...

  5. 11 - Vue模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML ...

  6. 前端学习笔记系列一:11@vue/cli3.x中实现跨域的问题

    由于浏览器的同源访问策略,vue开发时前端服务器通常与后端api服务器并非是相同的服务器,因此需要使用一个代理服务器实现跨域访问.在@vue/cli3.x根目录下创建一个vue.config.js文件 ...

  7. 11 vue 自定义全局方法

    //global.js// 定义vue 全局方   // 定义vue 全局方法 建议自定义的全局方法加_ 以示区分 export default {   install(Vue, options =  ...

  8. 11. VUE 数组操作

    变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() 添加元素 <ul id="example-1"> <li ...

  9. 11.Vue.js-事件处理器

    事件监听可以使用 v-on 指令: <div id="app"> <button v-on:click="counter += 1">增 ...

  10. vue 组建实现数据的双向绑定

    <!DOCTYPE html><html><head> <style>body {  font-family: Helvetica Neue, Aria ...

随机推荐

  1. echo 1+2+"3+4+5“输出的结果是6

    如上,为什么echo 1+2+"3+4+5"输出的结果是6呢?刚开始我也不是很明白,以为有问题,但在电脑上运行程序的时候,结果出现6 了.这让我更加疑惑不解.现将问题解释一番. 在 ...

  2. 基于WIN8.1:新手篇→tomcat安装配置

    一.JDK配置 下载安装JDK和tomcat 打开电脑属性,高级系统设置进行环境变量配置 新建系统变量,变量值为JDK安装路径,并在系统变量path最后加上“%JAVA_HOME%\bin;%JAVA ...

  3. C#基础知识之Sender

    /// <summary> /// sender就是事件发起者,e存储事件发起者的一些参数 /// 例如: /// private void button1_Click(object se ...

  4. docker swarm:Error response from daemon: rpc error: code = Unavailable desc = grpc: the connection is unavailable

    环境:cetos7 描述:创建完docker swarm,想把node主机加入swarm中,执行以下命令时,报错 无法连接! 原因是:防火墙!!!!!!!没关!!!! 解决办法是:关闭防火墙

  5. Interrupt

    Interrupt ,给线程发送一个中断信号 给t1线程发送了中断信号,t1对线程的中断信号判断后,跳出循环,线程t1运行结束 public class Demo { public static vo ...

  6. js按照特定的中文字进行排序的方法

    之前遇到过按照中文字符排序的需求很顺利的解决了,这次是按照特定的中文字进行排序,比如按照保守型,稳健型,平衡型,成长型,进取型进行排序. 可以使用localeCompare() 方法来实现中文按照拼音 ...

  7. 在ASP.NET MVC中使用Redis

    一.Redis基本认知 1.含义: REmote DIctionary Server(Redis) | 是一个key-value存储系统 2.特性: 2.1 持久化:可以将内存中的数据保存在磁盘中,重 ...

  8. 【vue】vue +element 搭建及开发中项目中,遇到的错误提示

    1. import Layout from '@/views/layout/Layout'; export default [ { // 配置路由,当路径为'/activePublic',使用组件ac ...

  9. 003_python内置的@staticmethod详解

    python中的staticmethod 主要是方便将外部函数集成到类体中,美化代码结构,重点在不需要类实例化的情况下调用方法(类似java的静态方法) 如果你去掉staticmethod,在方法中加 ...

  10. nn.ReLU(inplace=True)中inplace的作用

    在文档中解释是: 参数: inplace-选择是否进行覆盖运算 意思是是否将得到的值计算得到的值覆盖之前的值,比如: x = x + 即对原值进行操作,然后将得到的值又直接复制到该值中 而不是覆盖运算 ...