Vue基础(代码片段、表单输入绑定、简单的购物车案例)

■ 目录

代码片段 的好处 (效果:快速生成代码的,好处:加快项目开发)

表单输入绑定/双向绑定 的概念&相对JQ的优势

一、代码片段

明确需求

思考:创建vm对象前 都要复制vue库地址,然后每次都要写 new Vue麻烦不麻烦

肯定麻烦

解决:通过代码片段(给大家讲解的是vscode编辑器的代码片段,如果你是其他编辑器

百度吧~~

概念

代码片段

就是提前准备好一段代码,然后通过简单的命令生成

实现

步骤1:ctrl + shift + p

步骤2:输入 snip 代码片段(选择首选项开头的

Vue基础(代码片段、表单输入绑定、简单的购物车案例)_第1张图片

步骤3:选择html或html.json能出来就行(自己搜索)
Vue基础(代码片段、表单输入绑定、简单的购物车案例)_第2张图片

步骤4:复制一下 html.json (仅提供一种参考)

{
     
	"vue": {
     
		"prefix": "vue",
		"body": [
			"",
			"",
			"\t",
			"\t\t神龙教主",
			"\t\t",
			"\t",
						"\t",
						"\t\t
", "\t\t
"
, "\t\t", "\t\t", "\t", "" ], "description": "vue - Defines a template for a vue & html5 document" } }

步骤5:测试一下,创建xxx.html文件 输入vue尝试生成

二、表单输入绑定(***)

明确需求

思考:项目中如何获取表单中的数据

实现:1-给标签增加id属性,2-通过document.qs(选择器)获取

现在:vue中更简单的方法

专业术语:数据双向绑定

简介&语法

  • 单向绑定:将 M模型数 自动同步到 V视图(太多 举例 v-text、v-html、v-bind等

  • 双向绑定:M 自动同步到 V && V 自动同步到 M

  • 语法:v-model=“data中的键”
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6mJg7p84-1590842331289)(images/1574743401786.png)]

来个栗子

  • 单向绑定:模型放msg和url属性 同步到视图
  • 双向绑定:input框修改查看模型数据变化
  • 其他:textarea、checkbox、radio练习
<!DOCTYPE html>
<html lang="en">
<head>
<title>神龙教主</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
    <h1>单向绑定(M -> V</h1>
    <div>{
     {
     msg}}</div>
    <a v-bind:href="url">点击进入我的世界</a>

    <h1>双向绑定(仅支持input/textarea/select)</h1>
    <!-- <input type="text" v-bind:value="uname" />  不行单向的-->
    <input type="text" v-model="uname" />

    <h1>input:radio</h1>
    <div>
        <!-- 留心:把name和value必须加上 -->
        性别:
        男    <input type="radio" v-model="radioContent"  name="sex"  value="男"><input type="radio" v-model="radioContent"  name="sex"  value="女">
        中间生<input type="radio"  v-model="radioContent"  name="sex"  value="中间生">
    </div>

    <h1>input:checkbox</h1>
    <div>
        <!-- 留心:把name和value必须加上 -->
        兴趣爱好(兴趣爱好有多个所以你得模型得用数组<br />
        吃饭 <input type="checkbox" name="like" value="吃饭" v-model="checkboxContent">
        睡觉 <input type="checkbox" name="like" value="睡觉" v-model="checkboxContent">
        挤痘痘 <input type="checkbox" name="like" value="打豆豆" v-model="checkboxContent">
        玩球球 <input type="checkbox" name="like" value="玩球球" v-model="checkboxContent">
    </div>

    <h1>textare</h1>
    <textarea name=""  cols="30" rows="10" v-model="textareaContent"></textarea>

    <h1>select</h1>
    <select v-model="selectContent">
        <option value="中国">中国</option>
        <option value="美国">美国</option>
        <option value="新加坡">新加坡</option>
        <option value="印度尼西亚">印度尼西亚</option>
    </select>

    <div style="margin-top:100px;"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 语法:vm.data中的键 = 值
// 作用:修改data模型中的数据
const vm = new Vue({
     
    el: '#app',
    data: {
     
        msg: "小明",
        url: "http://yellow.cn",

        uname: "webopen",

        textareaContent: "测试数据",
        selectContent: "新加坡", // 留心:这边的值如何过option中的值一样则默认选中
        radioContent: "女",
        checkboxContent: ["吃饭", "打豆豆"]    // 切记上面只有一个选择结果,而checkbox多个 必须声明数组
    }
})
</script>
</body>
</html>

小总结一下

双向绑定:可以将模型数据同步到视图 && 视图数据也可以同步到模型的表现

语法:v-model=“data中的键”

使用步骤

1. 先写html标签
2. 给html标签增加v-model语法(仅支持input、textarea、select标签
3. 在data模型中定义即可

注意1:input:checkbox模型中必须是数组,其他都是字符串
注意2:input:radio和input:checkbox的name必写、value必写且唯一

在HTML中:value不一样不会报错,但是逻辑错误
在Vue中:value不一样会出问题 关键实战肯定不一样

■实战:购物车案例&修饰符

效果图

=======================
Vue基础(代码片段、表单输入绑定、简单的购物车案例)_第3张图片

=======================

需求

需求1:遍历carts模型中的数据(注:遍历li标签)
需求2:单击商品复选框,同步数据到chooseCarts模型中(注:1存数组,2name必须写,3value必须写且唯一
需求3:单击商品添加按钮,调用addCartFn方法,模型carts对应数据+1
需求4:勾选统计,显示总价格总数量(封装totalFn方法,遍历计算已勾选商品总数量和价格分别保存到模型		totalNum&totalPrice)
需求5:全选&全不选 (封装chooseCartsFn方法)
需求6:细节优化(input框单击同步、input框输入同步,input框只能输入数字)
  • 初始化代码


  
    
    
    
    
  
  
    

购物车

全选&全不选
  •   标题:, 价格:, 数量: 


勾选商品

总数量:,总价:

小DOM 简单模拟购物车效果










购物车

全选&全不选
  •   标题:{ {item.title}}, 价格:{ {item.price}}, 数量:{ {item.number}} 


勾选商品

{ {chooseCarts}}

总数量:{ {totalNumber}},总价:{ {totalPrice}}

你可能感兴趣的:(vue,vue基础,表单绑定,vue,js)