一、创建vue模板
https://www.bilibili.com/video/BV1Cz411v76E
cmd→cd→vue create projectname 接着的设置如下:
二、调试、预览
package内代码区调试按钮
三、基础框架
html+js+style
<template>
<div>
</div>
</template>
<!-- -->
<script>
export default{
}
</script>
<!-- -->
<style>
</style>
四、创建变量
变量定义用双大括号在html区进行定义{{变量名}}
变量的值存在js区的export default内,并且放在data(){ return{ } },
内
五、v-html和{{ }}的区别
v-html可以把文本串解析成html格式
{{ }}只能解析成文本串模式
六、v-bind绑定指令(简写::属性="")
https://www.jianshu.com/p/3515e5aa3ade
6.1把实例的某属性和变量绑定
6.2把实例的某属性和对象绑定
七、v-if和v-show的区别
v-if决定代码段是否被渲染
v-show决定已经渲染了的代码段是否被显示
八、v-on监听事件(简写:@事件="")
事件存在js区的export default内,并且放在method:{ }
内
1按键修饰符:检测有没有按键盘上的某个键,比如,按住alt再单击左键,略
2事件修饰符:略
九、v-model
用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。
十、v-for循环输出
1输出数字
2输出数字+脚标
3输出二维数组
4循环对象