1.创建第一个vue
vue 应用 结构 可以分成两个部分 ， 一个是视图，一个是脚本；
脚本有两个参数：el 和data
视图
<div id="app">
{{ message }} {{name}}
</div>
脚本
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
// 数据初始化
message: 'Hello Vue!',
name : "Vue"
}
});
</script>
2.数据与方法
var vm = new vue{
}
vue 实例创建的时候， data 对象中的所有属性都会被添加到vue的响应式系统中去「定义的特殊 声明不可改动的属性除外」，当数据改动后，
3. 模板语法-指令
- 指令：
v-if = "变量" ，控制视图标签是否显示
v-bind: href = "变量" ，控制 超文本跳转的地址或文件
所有上述的变量都是在 new view 中的daga 声明以及初始化 - 指令修饰符：
@click.stop ,stop 就是对点击事件的修饰，一般是对属性的修饰动作
4.class 和style绑定
<div id="app">
<div
class="test"
v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '']"
style="width:200px; height:200px; text-align:center; line-height:200px;">
hi vue
</div>
<div
:style="{color:color, fontSize:size, background: isRed ? '#FF0000' : ''}">
hi vue
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
isActive : true,
isGreen : true,
color : "#FFFFFF",
size : '50px',
isRed : true
}
});
</script>
<style>
.test{font-size:30px;}
.green{color:#00FF00;}
.active{background:#FF0000;}
</style>
5.条件渲染
- v-if 指令 用于条件性的渲染一块内容 这块内容只会在指令的表达返回真的时候被展示或者被渲染
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
- v-show = ture 的时候会展示
区别： v-if 是惰性的，只有对应的正确状态才会被渲染（打包代码是不可看到）
而v-show 是都会被渲染，只不过，正确的分支会被显示，而不正确的分支会被隐藏（打包代码是可看到）
这样就说明 如果 页面频繁切换则需要使用v-show ，如果不需要频繁切换 就用v-if ，或者从代码安全性触发使用if
6. 列表渲染
- v-for 指令可以通过一个数组来渲染 一个列表
- key = "index" 可以在渲染的时候根据 index（是根据实际工作而写的变量，和数据库的主键一个意思）索引来按照顺序渲染，（如果数据渲染中顺序发生变化，页面也会变化）
<ul>
<li v-for="item,index in items" :key="index">
{{index}}{{ item.message }}
</li>
</ul>
<ul>
7.事件绑定
可以使用 v-on 指令监听DOM 事件，并且调用自定义函数
v-on 事件修饰符
stop 阻止单击事件继续传播
prevent 提交时间不再重载页面
capture 捕获事件 元素自身触发的事件再此优先处理，后才交由内部处理
self， 只有事件是当前元素触发的 才调用
<div id="app">
<div id="example-1">
<button v-on:click="counter += 1"> 数值 : {{ counter }} </button><br />
<button v-on:dblclick="greet('abc', $event)">{{counter}}</button>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
counter: 0,
name : "vue"
},
methods:{
greet : function (str, e){
alert(vm.counter)
return vm.counter + "✅"
}
}
});
</script>
12 组建基础
props 可以用来定义组件内的 属性
定义一个vue 组件：
Vue.compoment( 'button-counter',{
props:['titles'],
data : function(){
return {
count :8
}
},
//template 是模板样式
template: '<button v-on:click = "count++"> you clicked me {{count}} times. </button>'
}
)
------------
使用组件
<div id = "app">
<button-counter><button-counter>
</div>
组件注册
vue的组件是都是全局注册的
组件的局部注册：
1. 在 new vue 中实现组件 ，也就是局部注册
var vm = new Vue({
el : "#app",
data : {
},
methods:{
clicknow : function (e) {
console.log(e);
}
},
components:{
test : {
template:"<h2>h2...</h2>"
}
}
});
2.模块系统中注册组件
建议是在项目中创建一个组件文件夹 compoment 中放置所有的通用组件，当有地方需要使用的时候在文件内部再引用使用：
import CompomentA form './CompomentA' // 从 文件夹 CompomentA 中引用组件CompomentA
import CompomentB form './CompomentB'
export default {
compoments: {
compomentA ,
compomentB
},
}
单文件组件
什么是单文件组件：
single-file compoment ，扩展名为 .vue.
单文件组件主要是解决：
全局定义 - 组件的全局定义要求每个组件命名不同
字符串模板- 缺乏语法高亮，在html 多行的时候需要用到丑陋的\ 连接符
不支持css - 意味着当htnl 和javascript 组件化的时候，css 明显被遗漏
没有构建的步骤 - 限制使用html 和javascropt 而不能使用预处理器，如pug 和babel
准备工作：
安装 npm
npm 全称为 Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。
npm -v
由于网络原因 安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装 vue-cli
脚手架工具
cnpm install -g @vue/cli
安装 webpack
webpack 是 JavaScript 打包器(module bundler)
cnpm install -g webpack
单文件组件主要氛围三个部分：
template 、script、style
模板，脚本，样式css