欢迎来到我的CSDN主页!
我是Java方文山,一个在CSDN分享笔记的博主。
在这里,我要推荐给大家我的专栏《MySQL》。
无论你是编程小白,还是有一定基础的程序员,这个专栏都能满足你的需求。我会用最简单易懂的语言,带你走进MySQL的世界,让你从零开始,一步步成为数据库大师。
让我们一起在MySQL的世界里畅游吧!
点击这里,就可以查看我的主页啦!
Java方文山的个人主页
如果感觉还不错的话请记得给我点赞哦!
期待你的加入,一起学习,一起进步!
目录
前言
Vue基础语法知识
最基础Vue实例对象
一、插值
1.1 文本
1.2 v-v-html
1.3 数据双向绑定数据(v-model)
1.3.1.绑定文本框
1.3.2.绑定单个复选框
1.3.3.绑定多个复选框
1.3.4.form表单数据提交
1.4 属性(v-bind)
1.5 表达式
1.6 class绑定
1.7 style绑定
二、指令
2.1 v-if|v-else|v-else-if
2.2 v-show
2.3 v-for
2.4 动态参数
三、过滤器
3.1.局部过滤器
3.2.全局过滤器
四、计算属性&监听属性
4.1.计算属性
4.2.监听属性
五、案例实操
5.1.购物车案例
1、想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
2、root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法
3、root容器中里的代码被称为【Vue模板】
4、Vue实例和容器是一一对应的
5、真实开发中只有一个Vue实例,并且会配合着组件一起使用
6、{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性
7、一旦data中的数据发生了改变,那么页面中用到该数据的地方也会自动更新
el用于指定当前Vue实例为那个容器服务,值通常为css选择器字符串
data用于存储数据,供el所指定的容器去使用,值暂时写为一个对象
new Vue({
el:'.root' , //el用于指定当前Vue实例为那个容器服务,值通常为css选择器字符串
data:{ //data用于存储数据,供el所指定的容器去使用,值暂时写为一个对象
name:'Java方文山',
address:'CSDN博客网站'
}
})
插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段"
语法:{{ 变量名/对象.属性名 }}
v-html专门用来展示数据, 其作用和插值表达式类似但可以避免插值闪烁问题。
当网速比较慢时, 使用{{}}来展示数据, 有可能会产生插值闪烁问题。
插值闪烁: 在数据未加载完成时,页面会显示出原始的{{}}, 过一会才会展示正常数据.
语法:
v-html:
区别:
v-text/{{
变量名/对象.属性名
}}:把数据当作纯文本显示.
v-html:遇到html标签,会正常解析
Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候,数据也会自动变化.
注意:
代码:
用户名:
效果:
代码:
同意
效果:
代码:
Java
Python
Swift
效果:
例子:传json格式跟formData格式的两种情况
提交
HTML属性中的值应使用v-bind指令
语法:
百度
new Vue({
el: '#app',
data: {
hrefstr: 'http://www.baidu.com'
}
})
Vue提供了完全的JavaScript表达式支持
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
代码:
表达式
{{str.substring(0,4).toUpperCase()}}
张三:{{number+1}}
{{ok ? 'yes' : 'no'}}
我的Id是js动态生成的
效果:
使用方式:v-bind:class="expression"
expression的类型:字符串、数组、对象
代码:
{{msg}}
效果:
v-bind:style="expression"
expression的类型:字符串、数组、对象
代码:
{{msg}}
效果:
根据其后表达式的bool值进行判断是否渲染该元素
他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if
代码:
成绩:
不及格
继续努力
良好
不错
优秀
效果:
v-show指令与v-if指令类似,用于根据表达式的值来控制元素的显示和隐藏。当v-show指令的表达式的值为false时,元素会被渲染为不可见状态,并且会添加CSS样式"display:none"。这意味着该元素在页面上不会占据空间,并且不会显示给用户。
然而,v-show指令与加载出页面是不同的。当使用v-if指令时,如果条件为false,对应的元素将从DOM中完全移除,并且不会加载到页面上。
代码:
v-if
v-show
效果:
类似JS的遍历
遍历数组: v-for="item in items", items是数组,item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名,index下标
语法:
v-for="item in items"
v-for="(item,index) in items"
代码:
{{user.name}}--{{user.id}}
效果:
从2.6.0开始,可以用方括号括起来的JavaScript表达式作为一个指令的参数
同样地,你可以使用动态参数为一个动态的事件名绑定处理函数
代码:
动态参数
效果:
vue允许你自定义过滤器,被用作一些常见的文本格式化,格式如下:
{{ name | capitalize }}
代码:
{{msg|all}},{{msg|single}},{{msg|all|single}},{{msg|param(4,5)}}
效果:
注意1:过滤器函数接受表达式的值作为第一个参数
注意2:过滤器可以串联
{{ message | filterA | filterB }}
注意3:过滤器是JavaScript函数,因此可以接受参数:
{{ message | filterA(arg1, arg2) }}
注意4:js定义一个类
function Stu(){};
Stu.prototype.add(a,b){};//添加一个新的实例方法
Stu.update(a,b){};//添加一个新的类方法
代码:
date.js
//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
//debugger;
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
};
function fmtDate(date, pattern) {
var ts = date.getTime();
var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
if (pattern) {
d = new Date(ts).format(pattern);
}
return d.toLocaleString();
};
{{msg}}_过滤之前
{{msg | all}}_过滤之后
效果:
计算属性就是一个提前定义好的方法, 该方法可以看作是一个特殊的值, 可以在插值表达式中使用
语法:
单价:
数量:
总价:
效果:
watch可以监听简单属性值及其对象中属性值的变化
watch类似于onchange事件,可以在属性值修改的时候,执行某些操作
代码:
千米:
米:
效果:
小贴士:计算属性和监听属性的区别?
计算属性是用来声明式的描述一个值依赖其它的值,当所有依赖的值或者变量改变的时候,计算属性也会随着该变;而监听属性主要是监听data里面的定义的量,当该变量变化的时候,触发watch。两者的主要区别是:计算属性有缓存机制,不支持异步操作;而监听属性没有缓存机制,支持异步操作。
以前我们前端的html代码都是非常繁琐,需要拿到表格的第几行再拿到第几个表格内的什么属性等等,通过今天的学习,我们可以用计算属性的方式去完成数量递增递减随之总价格也会发生改变的案例。
优化前代码:
Java方文山