1.vue入门
el:控制的区域
data:定义的数据模型（v-model）实现双向的数据绑定（MVVM）
{{message}}:插值表达式
关于这里的vue.js它是官方文档的内容 第一步通过src='js/vue.js'引入
2.vue的常用指令 基础指令地址参考八个Vue中常用的v指令详解_vue.js_脚本之家
（1）v-for的用法
注：push向数组增加元素 shift向数组移除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<!-- v-for：在 li 标签中进行获取数组元素，进行展示 -->
<!-- item: 循环得到的元素；index：获取元素在数组中的下标 -->
<li v-for="item,index in arr1">
第{{index + 1}}个同学: {{item}}
</li>
</ul>
<hr>
<input type="button" value="添加数据" @click="addData">
<input type="button" value="移除数据" @click="removeData">
<!-- v-for 遍历，展示数据 -->
<h2 v-for="person in persons">
我是 {{person.name}}, 我今年 {{person.age}} 岁.
</h2>
</div>
</body>
<script>
var VM = new Vue({
el: "#app",
data: {
// 数组
arr1: ["Mike", "John", "Jack"],
// 对象数组
persons: [
{name: "Mike", age: 21},
{name: "John", age: 22},
{name: "Jack", age: 23},
],
},
methods: {
addData: function(){
// 向数组中添加元素
this.persons.push({name: "Peter", age: 24});
},
removeData: function(){
// 移除数组中的元素，会移除第一个元素
this.persons.shift();
},
},
});
</script>
</html>
结果展示如下：
（2）v-on的用法
von相当于js中的事件绑定 如果不使用von的话需要1.拿到dom对象const obj1 = document.queryselect()2.为dom对象绑定事件触发obj1.addeventlensiner
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>von的练习</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点击按钮送礼物" v-on:click="give(3,'玫瑰花')">
<span >向主播刷{{num}}个{{gift}}</span>
<br>
<input type="text" value="输入回车会有弹窗" v-on:keyup.enter="handle">
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
num:0,
gift:"火箭",
},
methods: {
give:function(n1,n2){
this.num = n1;
this.gift = n2;
},
handle:function(){
alert("送礼完毕");
},
},
});
</script>
</html>（3）v-bind的用法
注意事件绑定 单项事件绑定（在浏览器修改后的值不会返回到vue中）双向数据绑定v-modle(在浏览器修改后的值会返回到vue中MVVM模型)
（4）关于获取事件触发后的值
keydown后面可以跟不同的事件类型
（5）css样式的绑定
：class用于动态样式的绑定(动态绑定的好处是便于修改如下图) :class = "arr"这里的arr可以被定义为数组里面存放三个样式当不需要某个样式时 直接vm.arr.shift() 添加某个新样式时vm.arr.push（）
v-model.number 将输入的东西转为数字
（6）VUE组件化
为什么要组件化：可移植，可拓展性好
非单文件组件（一个文件有多个组件）和单文件组件（一个文件只有一个组件）
1.创建一个组件 vue.extend()2.写组件标签<组件1></组件1>3.在vm里面注册组件 component：{组件1，组件2}
3.前端开发工程化
vue脚手架的环境vue-cli是一个vue的项目模块
1.模块化（css,js）2.组件化（element ui）3.规范化 4.自动化
以.vue结尾的文件叫做vue的组件文件 每个组件文件由三个部分组成<template><script><style>
main.js叫做入口文件
1.引入vue (import vue from xxx) 2.引入app组件（是所有组件的父组件）3.创建vue的对象 把app组件放进来
关于props配置项 的大概意思是子组件.vue里面js的区域添加props属性定义类型 能允许 app父组件根据<student name:"xxx" gender:"xxx>的方式来定义
关于复选框是否被选中的属性:checked值为true或者false
关于子组件调用父组件(App)的两种方法
1.最基础的方法 使用props 在父组件里面声称一个函数在子组件中使用props:['父组件函数名']能拿到父组件的内容
2.使用自定义事件：两种写法
(1)父组件调用子组件<Student @自定义事件名：方法名> 子组件$emit('自定义事件名'，'传递参数给父组件')
1683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
