1 Vue的基础语法
1.1 Vue 挂载点，模板与实例
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body><!--1 挂载点、模板，实例之间的关系--><!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980--><!--2 这里的id='app'就是挂载点--><div id="app"><!--3 在挂载点之内的这些内容都称之为模板--><h1>hello {{msg}}</h1></div><script>//var app 就是实例var app = new Vue({el: '#app',//2 指向挂载点
template:'<h2>hello2 {{msg}}</h2>',//3 也可以将模板的内容放到 template内，页面上就不需要模板了
data: {msg: '5555'}});</script>
</body>
</html>View Code
1.2 Vue实例中的数据，事件和方法
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body><div id="app"><!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980--><!--1 这里的{{}}称之为 插值表达式--><h1>hello {{msg}}</h1><!--2 v-text是Vue中的一个指令，这个指令代表h1中的内容是Vue实例中text变量的内容--><div v-text="text"></div><!--3 v-text与v-html的区别是：v-text不会解析html，v-html 会解析html--><div v-html="text"></div><!--4 v-on:代表在这个模板上绑定一个事件,绑定什么事件，就在v-on:后面添加具体的事件--><!--4.1 具体的事件是写在实例methods方法里--><div v-on:click="handleClick('ddss')">{{context}}</div><!--4.2 v-on可以简写为@--><div @click="handleClick('ddss')">{{context}}</div><!--Vue吸引人的地方就是：我们不是面向DOM编程，而是面向数据编程--></div><script>var app = new Vue({el: '#app',data: {msg: '5555',text: '<span style="color:red">5555</span>',context: 'hello',},methods: {handleClick: function (a) {// alert(a);//'ddss'this.context = "2222";}}});</script>
</body>
</html>View Code
1.3 Vue中属性绑定和双向数据绑定
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>属性绑定和双向数据绑定</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body><div id="app"><!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980--><div title="this is hello world">hello world</div></div><div id="app1"><!--1 属性绑定：v-bind--><!--1.1 属性绑定： v-bind代表 当前这个属性与谁绑定，是与titleData数据项绑定，一旦使用v-bind则属性值代表的是js表达式v-bind可以缩写为:--><div v-bind:title="'一旦用v-bind,这里是JS表达式'+titleData">hello world</div></div><div id="app2"><!--1.2 属性绑定 v-bind可以缩写为: --><div :title="titleData">hello world</div></div><div id="app3"><!--2 双向数据绑定:v-model --><!--双向数据绑定是指：当页面中的内容发生改变，则Vue实例中的数据也发生改变--><div :title="titleData">hello world</div><input v-model="context" /><div >{{context}}</div></div><script>var app = new Vue({el: "#app",data: {title: "this is hello world"}});var app1 = new Vue({el: "#app1",data: {titleData: "this is hello wordss"}});var app2 = new Vue({el: "#app2",data: {titleData: "ddssss"}});var app3 = new Vue({el: "#app3",data: {titleData: "",context:"this is context"}});</script>
</body>
</html>View Code
1.4 Vue中的计算属性和侦听器
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>Vue中的计算属性和侦听器</title><!--1 引入Vue库--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body><div id="app"><!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980-->姓:<input v-model:value="firstName" />名:<input v-model:value="lastName" /><div>{{fullName}}</div><div>{{count}}</div></div><script>var app = new Vue({el: "#app",data: {firstName: '',lastName: '',count:0},computed: {//1 computed 是Vue中的计算属性,如果内容没有改变，则取上一次的计算结果，所以速度很快
fullName: function () {return this.firstName + ' ' + this.lastName;}},watch: {//2 watch侦听器//监听fullName变化，一旦该fullName变化，则执行方法中内容
fullName: function () {this.count++}}});</script>
</body>
</html>View Code
转载于:https://www.cnblogs.com/Torey/p/10005412.html
1 Vue的基础语法相关推荐
- Vue.js 基础语法 入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记 学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验 响应式:数据一旦改变,视图就会响应改 ...
- vue js基础语法
什么是vue vue是目前前端主流的js框架,它和库的区别在于: 库是更多是一个封装好的特定的集合,提供给开发者使用,而且是特定于某一方面的集合(方法和函数),库没有控制权,控制权在使用者手中,在库中 ...
- Vue所有基础语法细节整理复习
本文已同步到:个人博客地址 本文的所有截图均来自b战coderwhy老师的vue教学视屏,代码时自学自己照着敲的,我只不过是搬运工,如有侵权立即删除 如果看完了这个vue基础,还可以看下面的: vue ...
- Vue学习笔记（1）（认识Vue、基础语法）
Vue2.x学习笔记.原视频教程:最全最新Vue.Vuejs教程,从入门到精通_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili 第一部分:认识Vue.Vue基本语法. 邂逅Vue.js 简单认识V ...
- （6）vue.js基础语法—插值表达式
一.vscode插件介绍 在我们演示插值表达式之前,我们先安装这一个VScode给我们提供的插件,它可以将我们书写好的网页通过服务端口的方式进行访问,同时它的好处还有:再修改代码后,不需要我们手动点击 ...
- （4）vue.js 基础语法
Vue 实例是通过 Vue 函数创建的对象,是使用 Vue 功能的基础.我们想要使用Vue的功能,必须要实例化创建一个Vue的对象. <script>var vm = new Vue({/ ...
- Vue的基础语法-常用v-on、v-if、v-bind等指令的细节(最详细)
文章目录 模板语法 Mustache语法 不常用基本指令 v-once指令(了解) v-text指令(了解) v-html指令(了解) v-pre指令(了解) 重点掌握的指令 v-bind指令 1.介 ...
- （5）vue.js 基础语法—el选项
一.el选项介绍 • 用于选取一个 DOM 元素作为 Vue 实例的挂载目标. • 只有挂载元素内部才会被 Vue 进行处理,外部为普通 HTML 元素. • 代表 MVVM 中的 View 层(视图 ...
- 【Vue.js 知识量化】基础语法
Vue.js 基础语法 Vue.js 安装 插值操作 Mustache:将 data 中的文本数据插入到 HTML v-once:使元素和组件只渲染一次 v-html:解析 HTML 并展示 v-t ...
- Vue知识（一）Vue基础语法
Vue知识 一.邂逅Vue.js 1.认识Vue.js 2.Vue.js安装方式 3.Vue初体验 4.Vue的MVVM框架 二.Vue基础语法 v-if指令 v-show指令 v-else指令 v- ...
最新文章
- rrdtool 修改水印logo
- PHPCMS V9 添加二级导航
- 几个.Net开源的CMS系统 (转)
- 如何用vue-router为每个路由配置各自的title
- mysql中ifnull和hive中if函数的转换
- 列表相关元素及其属性
- Shell基础(一)：Shell基础应用、简单Shell脚本的设计、使用Shell变量、变量的扩展应用...
- 前端开发在uc浏览器上遇到的坑
- 阿里巴巴开源离线同步工具 DataX3.0 介绍
- pygame学习_part1_pygame写程序前的准备工作
- 【心音信号】基于matlab GUI心音诊断系统【含Matlab源码 762期】
- 软件工程-图书馆管理系统
- EXCEL中如何分段进行快速填充
- 计算机审计质量论文,如何保证计算机审计的质量
- 听刘万祥老师讲“模拟范围滑尺的动态图表”
- stm32F4xx中文参考手册
- Sqlserver过滤数据
- 球球大作战JAVA小游戏
- P1069 微博转发抽奖
- 原生对象、内置对象、宿主对象的区别