![](https://img-blog.csdnimg.cn/20200727103313396.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
以实战为例,逐步深入了解vue框架应用
pj1653_9
这个作者很懒,什么都没留下…
展开
-
引用在线图片加载失败处理
当直接引用在线图片,加载失败图片地址中w.h没有显示具体值,加载不出来,解决方法是替代具体数值;解决方法1 ,写一个普通函数解决方法2,调用过滤器最后效果原创 2020-08-13 15:41:50 · 275 阅读 · 0 评论 -
动态组件
动态组件 var vm = new Vue({ el:"#box", data:{ who:"home" }, components:{ "home":{ template:`<div>home <input type="text"/>原创 2020-08-03 14:15:20 · 83 阅读 · 0 评论 -
ref
ref引用,ref用法:ref=“自定义名字”;1、ref放在标签上,拿到是原生节点:2、ref放在组件上,拿到的是组件对象不仅可以访问组件属性,还可以访问组件里的方法原创 2020-08-03 08:59:25 · 116 阅读 · 0 评论 -
子组件传父组件
子组件传父组件依靠是事件this.emit("父组件相应的事件",参数);事件要定义在父组件中;1、事件名称自定义;2、事件中的回调函数要定义在父组件中;3、this.emit("父组件相应的事件",参数);事件要定义在父组件中;1、事件名称自定义;2、事件中的回调函数要定义在父组件中;3、this.emit("父组件相应的事件",参数);事件要定义在父组件中;1、事件名称自定义;2、事件中的回调函数要定义在父组件中;3、this.emit()触发事件方法...原创 2020-07-31 16:47:17 · 105 阅读 · 0 评论 -
父组件传子组件
接受父组件传来的属性 props:[]子组件传父组件状态(动态绑定)动态绑定布尔值原创 2020-07-31 16:15:51 · 65 阅读 · 0 评论 -
组件
vue创建组件1、全局组件Vue.component(“组件名称”,{template:dom节点}) //全局定义组件 Vue.component("navbar",{ template:` <div> <button @click="handleback()">返回</button> navbar <button>原创 2020-07-31 14:06:25 · 61 阅读 · 0 评论 -
计算属性
计算属性放到js中如,实现将一个名字首字母大写功能var vm = new Vue({ el:"#box", data:{ myname:"xiaoming" }, computed:{ getMyName(){ return this.myname.substring(0,1).toUpperCase(原创 2020-07-31 10:57:09 · 80 阅读 · 0 评论 -
axios
axios用来ajax请求的库,使用该库要先下载该库,这里直接引用该库的js axios有两种方式请求,get和post它们使用方式分别为注意事项:axios请求数据的时候,返回数据会被包装,data:才是真实后端数据axios应用例子var vm = new Vue({ el:"#box", data:{ datalist:[] }, methods:{原创 2020-07-31 09:56:30 · 60 阅读 · 0 评论 -
fetch
fetch(),是W3C的标准,里面传的参数是请求地址;fetch写法:fetch(“请求地址”).then(res=>{返回数据}).then(res=>{ 接受数据 })fetch("test.json").then(function(res){ return res.json();//返回json文件 }).then(res=>{ console.log(res) //拿到数据 })还可这样原创 2020-07-31 09:19:03 · 126 阅读 · 0 评论 -
表单绑定的修饰符(v-model.lazy、v-model.number、v-model.trim)
双向数据v-model绑定基本功能改善:1、让其输入框失去焦点时,文本显示才实现同步。写法:v-model.lazy便能实现效果2、数字,限制显示为数字,无论输入框输入什么字符,最好只能显示数字3、空格,显示时去掉空格...原创 2020-07-29 11:36:50 · 321 阅读 · 0 评论 -
购物车案例代码
var vm = new Vue({ el:"#box", data:{ checkgroup:[], isChecked:false, datalist:[ { name:"商品1", price:10, ..原创 2020-07-29 11:05:40 · 218 阅读 · 0 评论 -
购物车案例(3)
完善优化:控制购物车商品数量的增改思路:让原来数据datalist中的number值随着增改操作进行改变写法:原创 2020-07-29 11:02:15 · 77 阅读 · 0 评论 -
购物车案例(2)
接购物车案例(1)总结:怎么获取勾选商品,就是利用v-model双向数据绑定,绑定是数组,要求是必需要有value值功能一:将勾选中的商品进行金额计算。思路:计算数组checkgroup中的pricenumber的值加上下一个pricenumber的值的深度遍历,总金额计算,放在一个函数,然就其函数渲染出来写法:在getSum()函数里计算金额,函数计算状态改变后,会自动执行一次功能二:实现全选功能,即选中,全部商品被勾选,未选中,全部商品不被选中。思路:当商品中的双向数据绑定数组为空(v原创 2020-07-29 10:39:21 · 376 阅读 · 0 评论 -
购物车案例(1)
首先将数据显示在页面上,写法如下:var vm = new Vue({ el:"#box", data:{ checkgroup:[], datalist:[ { name:"商品1", price:10, nu原创 2020-07-29 09:40:00 · 212 阅读 · 0 评论 -
双向数据绑定---记录表单状态
双向数据绑定:v-model=""单选绑定—v-model=""绑定的是布尔值效果:多选绑定—v-model="" 绑定的是数组效果:原创 2020-07-27 15:19:21 · 63 阅读 · 0 评论 -
事件修饰符
传统原生js阻止事件冒泡写法为:event.stopPropagation();而Vue是加个.stop阻止链接默认跳转写法原创 2020-07-27 14:12:25 · 74 阅读 · 0 评论 -
模糊查询--数组的过滤
开始的效果var vm = new Vue({ el:"#box", data:{ datalist:["aa","bb","cc","dd","add","cee","ee"], list:["aa","bb","cc","dd","add","cee","ee"], mytext:'' }, methods:.原创 2020-07-27 11:21:57 · 837 阅读 · 0 评论 -
vue起步
在自己项目中引入:两种方式引入:1)<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>2)文件引入方式<script scr=".../..."></script>进行渲染var vm = new Vue({ el:"#box", //vue 渲染开始的地方 data:{ myname:原创 2020-07-27 10:50:13 · 54 阅读 · 0 评论