1.vue模板语法

vue核心是允许开发者使用简洁的模板语法声明式地将数据渲染进DOM的系统，即将模板中文本数据放入DOM中，可使用mustache语法{{}}完成


<body><script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <div id="app">{{ text }}</div><script>var vm = new Vue({el: '#app',data:{text:'文本数据被渲染到HTML中了哦！'}})</script>

效果图如下：

{{}}将数据解析为纯文本，如果要解析为HTML，需要使用v-html

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>  <div id="app"><div v-html="message"></div></div><script>new Vue({el: '#app',data:{message:'用户名：<input type="text" value="中文名"/>'+'密码：<input type="password"/>'}//不支持换行，换行需要用单引括号括起来后用+连接})</script>

效果图如下：

vue支持JavaScript所有表达式，对于JavaScript表达式在模板语法中的使用，只适用于简单的表达式，复杂的可以使用后面要学的计算属性computerd,切记：每个绑定都只能包含单个表达式

{{var a = 1}}<!--为语句非表达式无效-->
{{if(ok){retrun message}}}<!--无效可以改为三元表达式-->

2.响应式声明渲染机制

vue工作原理是当把一个普通的JavaScript对象传给vue实例的data选项时，vue就会遍历此对象的所有属性，在属性被访问和修改时通知变化，并把数据渲染进DOM

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title></title></head><body><script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>   <div id="myapp"><p> {{message}}</p></div><script>var mydata = {message:'Hello vue'}var app = new Vue({el: '#myapp',data:mydata})</script></body>
</html>

打开浏览器控制台，修改app.message=hello vue.js，页面中p标签中数据会自动更新。
v-on:click可以绑定事件，缩写形式@click

3.vue属性绑定

页面需要超链接，那么需要用vue属性绑定
vue属性绑定

<div id='myAPP'>
<a v-blind:href="url"></a><!--缩写为<a:href="url"></a>--></div><script>
var app=new Vue({el:"myAPP",
data:{bookName:'vue.js编程入门'，
url:'https://cn.vuejs.org/'
}
})
</script>

若需要将bookname绑定到文本框

<p v-html="urlTag"></p>
var app=new Vue({
el:'myAPP',
data:{urlTag:'<a href=https://cn.vuejs.org/>vue.js</a>'}})

要绑定一段html,则用v-html指令
若要显示超链接，则用v-blind指令

4.vue双向数据绑定

对DOM元素来说，有数据双向绑定，vue是一个MVVM框架，及DOM数据双向绑定，当数据发生变化，视图也会发生变化，当视图发生变化，数据也会同步变化

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title></title></head><body><script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script><div id="app"><span>欢迎词：</span>代表地球人：{{ message }}<div>{{ message }}</div><button id="btn">点击改变</button><hr>请输入：<input type="text" id="keywords" v-model="keywords"><button id="btnSearch">点击搜索</button><form><input type="text" v-model="in1"><input type="text" v-model="in2"><input type="text" v-model="in3"><input type="text" v-model="in4"><input type="text" v-model="in5"><!--5个文本框也已经绑定了数据模型中的值--></form></div><script>var dat = {message: 'Hello vue!',keywords: '关键词',in1: '1',in2: '2',in3: '3',in4: '4',in5: '5'}var app = new Vue({el: '#app',data: dat})</script><script>var btnE1 = document.getElementById("btn");btnE1.onclick = function(){app.message = "你好，潜力无限";}</script><script>var btnSearchE1 = document.getElementById("btnSearch");btnSearchE1.onclick=funtion(){alert(app.message);}</script></body>
</html>

效果图：

通过结果可以发现数据实现了双向绑定，把data下的数据放到页面上，并且可以把data里的数据和页面上的元素产生一一对应的关系。绑定方式有两种：一是{{}}，可以由模板引擎根据数据实时进行修正，vue负责驱动模板把数据渲染到DOM上，一种是属性名也是一种指令，如v-model就是双向绑定。

5.vue计算属性

一般模板只用于简单的运算，计算属性computed可将复杂逻辑放入计算中进行处理，同时computed有缓存功能，可防止复杂计算逻辑多次调用引起的性能问题

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title>演示计算属性</title><script src="js/vue.js"></script></head><body><script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script><div id="app"><h2>图书</h2><div>您购买了{{book.name}}共{{book.count}}本===¥{{book.price}}/本</div>总价：{{totalPrice}}</div></div><script>var vm = new Vue({el: '#app',data: {book:{id:1,price:10,name:'vue入门',count:1},discount:0.8,deliver:12},computed:{totalPrice(){return (this.book.price*this.book.count)*this.discount+this.deliver;}}})</script></body>
</html>

效果图

注意：常见代码书写错误1.message名称2.逗号问题3.标签成对出现

6.计算属性与methods区别

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title>演示methods</title><script src="js/vue.js"></script></head><body><script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script><div id="app"><h2>图书</h2><div>您购买了{{book.name}}共{{book.count}}本===¥{{book.price}}/本</div>总价：{{totalPrice()}}</div></div><script>var vm = new Vue({el: '#app',data: {book:{id:1,price:10,name:'vue入门',count:1},discount:0.8,deliver:12},methods:{totalPrice:function(){return (this.book.price*this.book.count)*this.discount+this.deliver;}}})</script></body>
</html>

效果图：

由演示结果可知，可将计算总价定义为一个方法，而不是一个计算属性。两种方法结果相同，而计算属性是基于它们的依赖进行缓存的，简言之，多次访问totalprice计算属性会立即返回之前的计算结果，而不必再次执行函数
而每当触发重新渲染时，调用方法将总是再次执行函数，若有一个性能开销比较大的计算属性，还需要其他计算属性依赖他，如果没有缓存，将不可避免多次执行，methods没有缓存，每次访问都要重新执行。如果不需要缓存，就使用methods

vue.js前端开发技术读书笔记二：vue数据绑定相关推荐

《Web前端开发技术》笔记
参考文献--<Web前端开发技术> by 储久良目录第1章 Web前端开发技术综述 1.1 Web概述 1.1.1 Web的起源 1.1.2 Web的特点 1.1.3 Web工作原理 ...
Vue.js前端开发实践第一章课后作业
课后习题一.填空题 1. Vue是一套构建用户界面的渐进式框架. 2. MVVM主要包含3个部分,分别是Model. View和ViewModel. 3. Vue 中通过refs属性获取相应DOM元 ...
vue视频教程（Vue.js前端开发基础与项目实战）
适合人群: 适合网页设计与制作人员.网站建设开发人员.院校相关专业的学生.个人网站制作爱好者学习计划: 1.建议每天学习两小时 2.课堂代码可在附件中下载课程目标: 学习Vue前端框架,能使用Vu ...
Vue.js前端开发实战总结（1）
什么是Vue Vue是一套用于构建用户界面的渐进式框架,与其他大型框架相比,Vue被设计为可以自底向上逐层应用. Vue的数据驱动是通过MVVM(Model-View-ViewModel)模式来实现的 ...
vue.js 前端开发常见问题
前端开发常见问题 1. 热部署失效解决办法:参考查看系统当前max_user_watches的值 $ cat /proc/sys/fs/inotify/max_user_watches 复制代码应 ...
web开发技术，vue.js前端开发实战黑马程序员
作者根据多年的终端使用经验,详细介绍了一些实用的 CLI 工具,希望它们能帮读者提高生产力. 我大部分的时间都花费在终端的使用上,我觉得有必要给大家推荐一下比较好用的终端工具.先给大家列个推荐清单,如 ...
《java8高级应用与开发》读书笔记(二)
写在前面本笔记涉及内容:类加载.反射.枚举.注解.国际化.格式化类加载:是指将类的class文件读入内存,并为之创建一个Java.lang.class对象.即当线程使用任何一个类时,系统都会为之创 ...
vue router 参数_Vue.js项目开发技术解析
Vue.js项目开发技术解析一.Vue.js实例在一个Vue.js工程中,用于显示内容最基层的实例称之为根实例.通过该实例可以进行页面或组件的更新和显示.对于项目本身而言,无论是什么样的页面,都要 ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-6.用户登录（二），token验证
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-6.用户登录(二),token验证技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本 ...

vue.js前端开发技术读书笔记二：vue数据绑定

文章目录