<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>初识Vue</title>

        <!-- 引入Vue -->

        <script type="text/javascript" src="../js/vue.js"></script>

    </head>

    <body>

        <!--

            初识Vue：

            1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象：

            2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法：

            3.root容器里的代码被称为【Vue模板】：

            4.Vue实例和容器是一一对应的：

            5.真实开发中只有一个Vue实例，并且会配合着组件一起使用：

            6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性：

            7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新：

            注意区分：js表达式和js代码（语句）

               1、表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方

                  （1）a

                  （2）a+b

                  （3）demo

                  （4）x==y?'a':'b'

               2、js代码（语句）

                  （1）if（）{}

                   (2)for(){}

         -->

        <!-- 准备好一个容器 -->

        <div class="root1">

            <h1>hello,{{name.toUpperCase()}}</h1>

        </div>

        <div class="root2">

            <h1>我的年龄是:{{age}}</h1>

            <button>点我更换学校的名字</button>

        </div>

        <script type="text/javascript">

            Vue.config.productionTip =false//是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改下列 property：

            //创建Vue实例

            new Vue({

                el:'.root1',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串

                data:{ //data中用于存储数据，数据供e1所指定的容器去使用，值我们暂时先写成一个对象

                    name:'张涛',

                }

            })

            new Vue({

                el:'.root2',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串

                data:{ //data中用于存储数据，数据供e1所指定的容器去使用，值我们暂时先写成一个对象

                    age:18,

                }

            })

        </script>

    </body>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>模板语法</title>

        <!-- 引入Vue -->

        <script type="text/javascript" src="../js/vue.js"></script>

    </head>

    <body>

        <!--

            Vue模板语法有2大类：

            1.插值语法：

            功能：用于解析标签内容

            写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性

            2.指令语法：

            功能：用于解析标签（包括：标签属性，标签体内容，绑定事件.....）

            eg：v-bind：href="xxx"或简写为：href="xxx",xxx同样要写js表达式，

            且可以直接读取到data中的所有属性

            ps：Vue中有很多的指令，且指令形式都是v-???,此处我们只是拿v-bind举个例子。

         -->

        <!-- 准备好一个容器 -->

        <div id="root">

            <h1>插值语法</h1>

            <h3>你好，{{name}}</h3>

            <hr/>

            <h1>指令语法</h1>

            <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}</a>

        </div>

    </body>

    <script type="text/javascript">

        Vue.config.productionTip = false //阻止vue在启动时生成生产提示

        new Vue({

            el:'#root',

            data:{

                name:'jack',

                school:{

                    name:'尚硅谷',

                    url:'http://atguigu.com',

                }

            }

        })

    </script>

</html>

Vue学习day1的更多相关文章

  1. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  2. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  3. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  4. Vue学习-01

    1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...

  5. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  6. vue学习第一篇 hello world

    计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...

  7. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

  8. vue学习笔记（二）——简单的介绍以及安装

    学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...

  9. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  10. Vue学习2：模板语法

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

随机推荐

  1. 全链路压测SOP

    压测模型构建:人工 线上(大促)流量数据 (数据脱敏) 日常流量数据 业务方新的特性产生的变更数据 友商做过的事情 压测模型构建:自动 流程包括:录制-清洗-回放 (目前能做好的公司非常少) 压测标准 ...

  2. C盘满了

      今天电脑提示说C盘磁盘满了,于是开始做磁盘清理 右击C盘,点管理. 点击磁盘清理,勾选中临时文件.下载.回收站.缩略图,然后点击清理系统文件. 再去查看C盘仍然没有多大变化,于是挨个翻看C盘到底哪 ...

  3. laravel关联查询

    1.创建表: -- 创建学生表 CREATE TABLE `student` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) C ...

  4. php redis使用 常用方法 | Windows环境下安装Redis | Windows下php安装redis扩展（详解版）

    redis可视化工具:http://www.treesoft.cn/dms.html #php redis使用 常用方法 https://www.cnblogs.com/mg007/p/1043107 ...

  5. R7-3 十六进制字符串转换成十进制非负整数

    R7-3 十六进制字符串转换成十进制非负整数 分数 15 全屏浏览题目 切换布局 作者 颜晖 单位 浙大城市学院 输入一个以#结束的字符串,滤去所有的非十六进制字符(不分大小写),组成一个新的表示十六 ...

  6. mysql8 更改root密码(windows)

    1.停止服务 net stop mysql; 2.控制台输入 mysqld --console --shared-memory --skip-grant-tables 3.重新打开一个窗口,进入bin ...

  7. ubuntu无法进入图形界面可以进入终端

    ubuntu开机后无法进入图形界面解决办法:    进入命令行模式,执行下面的命令: rm /etc/X11/xorg.conf cp /etc/X11/xorg.conf.failsafe /etc ...

  8. Ubuntu16.04系统语言设置为中文以及搜狗输入法的安装

    特别声明:本文是在操作完才做的记录,不是特别详细,见谅哈! 虚拟机安装的Ubuntu16.04结果语言设置只有英文...起初没啥影响,后来发现自己的脚本注释显示全乱码,而且直接影响脚本运行(其实可能是 ...

  9. Lecture 1. Introduction and Basics - Carnegie Mellon - Computer Architecture 2015 - Onur Mutlu

    1.Hamming Distance: 两个相同长度比特串对应位置的不同位的数量,一般使用 d(x,y) 来表示汉明距离.对两个比特串进行异或运算,统计结果为1的个数就是汉明距离.   ======= ...

  10. HttpClient psot和get请求

    private String backAllUserInfo(String uid) throws IOException { //this.setInterfaceurl("/idm/js ...