初识vue小结
初识vue
大家都那么热爱他一定有原因，我也特想了解。
我来咯，
首先用vue开发版，用一个标签在head中插入，script标签src属性引入vue文件，就像jquey一样在script，但是放在head里最好
今天了解挂载点，模板，实例
例如：<div id="root">{{msg}}</div>//可以写在这
<script>
new Vue({
el:"#root",
template:‘<h1>hello {{msg}}</h1>’也可以写在这
data:{
msg: "hello world";
}
})
</script>
挂载点就是vue实例里el属性对应的id，所对应的dom节点
在挂载点里的内容就是模板,模板可以写在挂载点里面，也可以写在实例里template属性里面
实例中里面指定挂载点，然后写上模板，Vue结合模板和数据，生成最终要展示的内容，然后把内容放在挂载点中。
Element 元素，Data数据，root根，Template 模板
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vue</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="index.css" />
<script src="./vue.js"></script><!-- 引入在head避免出现抖屏 -->
</head> <body>
<!-- 挂载点，模板，实例 -->
<div id="root">
<h1>你好{{aaa}}</h1><!-- 挂载点里面的内容就是模板内容，模板内容也可以写在实例里面template属性里面 -->
</div><!-- 挂载点 -->
<!-- 数据事件和方法-->
<div id="thing" @click="handleClick">
{{content}}
<!-- v-text会进行转义，就是输出<h1>哈哈哈哈哈哈哈哈</h1>， -->
<!-- 差值表达式 -->
</div>
<!--属性绑定和双向绑定-->
<div id="roots">
<div :title="title">你好自己</div>
<input type="text" v-model="content" />
<div>{{content}}</div>
</div>
<!--计算和监听-->
<div id="jstitle">
姓：<input v-model="firstName" />
名：<input v-model="lastName" />
<div>{{fullName}}//{{cont}}</div>
</div>
<!-- v-if/v-show/v-for -->
<div id="ifshow">
<div v-show="show">隐身术</div>
<button @click="handleClick">显示/隐藏</button>
<ul>
<li v-for="(item, index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
// 挂载点，模板，实例
new Vue({// 实例
el: "#root",//实里面定义挂载点
template: '<h1>你好你好你好</h1>',//定义模板
data: {
aaa: "hello world"//如果没有在实例里面定义模板，data下的内容会自动在加载到挂载点上。
}
});
//数据事件和方法
new Vue({
el: "#thing",
data: {
number: 1233,
content: "哈哈哈哈哈哈哈哈",
},
methods: {
handleClick: function () {
this.content = "ojbk"
}
}
});
//属性绑定和双向绑定
new Vue({
el: "#roots",
data: {
title: "this is title",
content: "this is content"
} });
//计算和监听
new Vue({
el: "#jstitle",
data: {
firstName: "",
lastName: "",
cont: 0
},
computed: {// 计算
fullName: function () {
return this.firstName + '' + this.lastName
}
},
watch: {//监听
fullName: function () {
this.cont++
} } });
//v-if v-show v-for
new Vue({
el: "#ifshow",
data: {
show: false,
list: [1,2,3]
},
methods: {
handleClick: function () {
this.show = !this.show
}
}
}) </script> </body> </html> <!-- v-html -->
<!-- v-text -->
<!-- v-on:click 绑定点击事件，在实例例定义methods, -->
<!-- v-on:可以简写为@ -->
<!-- v-bind:title单向的数据绑定-->
<!-- v-bind:title可以缩写为： -->
<!-- v-model:title双向的数据绑定 --> <!-- v-if 和v-show区别 如果只做一次显示隐藏用v-if,v-show不重节点树上面删除，反复用的话用v-show -->
初识vue小结的更多相关文章
- python 全栈开发，Day19(组合,组合实例,初识面向对象小结,初识继承)
一.组合 表示的一种什么有什么的关系 先来说一下,__init__的作用 class Dog: def __init__(self, name, kind, hp, ad): self.name = ...
- 第1章-初识Vue.js
一.初识Vue 1.1.本次我们学习的内容 常用指令:vue中最基础的内容 交互: 网络请求 组件: 是vue.js 这个框架 最核心,最精华的内容,因为vue呐,它在所有的框架中是把组件化做到了极致 ...
- Vue.js——1.初识Vue
初识Vue.js 1. 什么是Vue.js Vue.js是前端主流框架之一,现在看招聘几乎都要求会vue 好像成了前端的代名词. Vue.js是构建界面 只关注视图层V,也就是页面的, 2. 为什么要 ...
- 通过Laravel 初识Vue.js
最近也在学习laravel的框, 因为之前学过tp框架, 都说laravel是最优雅的框架,所以开学后忍不住去试试这个在国外已经火的不要不要的框架. 总的来说,对于学习完tp框架后,我觉得tp毕竟是中 ...
- vue.js随笔记---初识Vue.js
1.基础要求: 1.1 HTML CSS JAVASCRIPT 1.2 模块化基础 1.3 Es6初步了解 2.vue.js 轻量级的MVVM模式框架,他同时吸收了recat和angular的优点,他 ...
- 初识Vue.js
一 ,什么是Vue.js? vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计.(自底向上设计方法是根据系统功能要求,从具体的器件.逻辑部件或者相似系统开始,凭借设计者熟练的技巧 ...
- 六、VueJs 填坑日记之初识*.Vue文件
上一篇博文中,我们将接口的地址通过webpack代理到了本地,解决了跨域的问题.在之前的文章中,我们一直对项目进行配置,并没有真正的切入正题,可能很多人还不明白我们要做什么?那么今天,我们就要开写代码 ...
- 初识Vue——计算属性和观察者
一.计算属性 在模板内使用 1.基础例子 <template> <div class="main"> <div id="reverse_st ...
- 初识Vue——模板语法
一.插值 1.文本 数据绑定最常见的形式是使用双大括号({{ }}--"Mustache"语法)的文本插值 <div class="mustache"& ...
随机推荐
- easyUI使用dailog实现弹出框带表单功能
本文为博主原创,未经允许不得转载: 示例如下: 需要注意的地方在id为win的div中需要有:closed="true"这个属性,这个属性为控制dailogn对话框显示与隐藏的属性 ...
- spring cloud 版本号与 boot版本之间的对应关系（版本不对，会导致pom无法引入）
版本号规则 Spring Cloud并没有熟悉的数字版本号,而是对应一个开发代号. 开发代号看似没有什么规律,但实际上首字母是有顺序的,比如:Dalston版本,我们可以简称 D 版本,对应的 Edg ...
- gulp点滴
var gulp = require('gulp'), connect = require('gulp-connect'), browserify = require('gulp-browserify ...
- Spring boot actuator端点启用和暴露
1.启用端点 默认情况下,除了shutdown端点是关闭的,其它的都是启用的.配置一个端点的启用,使用management.endpoint..enabled属性,下面的例子是启用shutdown端点 ...
- 雷林鹏分享：jQuery EasyUI 数据网格 - 列运算
jQuery EasyUI 数据网格 - 列运算 在本教程中,您将学习如何在可编辑的数据网格(datagrid)中包含一个运算的列.一个运算列通常包含一些从一个或多个其他列运算的值. 首先,创建一个可 ...
- idea启动springboot项目 报错：java.lang.NoSuchMethodError: javax.servlet.ServletContext.getClassLoader()Ljava/lang/ClassLoader;
有一次启动springboot项目的时候,报了一个非常奇怪的错误,说是找不到servletContext,springboot不是自带tomcat的吗? 在网上找了好久,说是用以下方式解决. 解决方式 ...
- 7.6 GRASP原则六: 多态 Polymorphism
GRASP原则六: 多态 Polymorphism How to handle alternative behaviors based on type 如何处理依据类型不同而有 不同行为的一类需求 ...
- C# 关键字base用法
1.调用基类的方法 public class A { public virtual void Hello() { Console.WiriteLine("Hello"); } } ...
- php添加pdo_mysql.so的扩展
1. 首先进入你下载的php的安装包里找到pdo_mysql文件夹. /usr/local/php-/ext/pdo_mysql ps:有些教程说从http://pecl.php.net/这个网站上下 ...
- jQuery.ready() 函数详解
jQuery.ready() 函数详解 ready()函数用于在当前文档结构载入完毕后立即执行指定的函数. 该函数的作用相当于window.onload事件. 你可以多次调用该函数,从而绑定多个函数, ...