-
通过<script>引用，来使用vue
<script src="https://cdn.jsdelivr.net/npm/vue2.5.16/dist/vue.js"></script >
下载vue.js，并引入进去
创建Vue实例：
<div id="root">{{msg}}</div>
new Vue({传递参数
el:"#root"接管哪一个页面元素
data:{数据
msg:"hello world"
}
})
查看全部 -
本次学习过程
查看全部 -
1.v-if="" : 控制DOM存在与否；
v-show="" : 控制DOM显示与否；
v-for="（item, index）of list" ：key="index": 控制循环列表的输出；（ 意为把 list 数组下的每一个元素赋值给变量名 item ,并把每个元素的下标存到对应的 index 中。PS : key 的值不可重复）
v-on（事件）的缩写是@
v-bind（绑定）的缩写是：
v-model（数据双向绑定）
2.通过this调用vue实例的data属性
this.list.push();往列表里添加值
如下this.inputValue=' '让提交后input框清空
3.computed: 计算属性
watch: 侦听器
methods: 定义按钮事件方法
data: 数据，值
template： 内容/模板
props:[''] 接受属性，参数
局部组件：通过components声明（在父组件中）
push() 方法 向对应函数添加值
4.在Vue里 ，每一个Vue组件，都是一个Vue实例 【实例=组件】；
Vue实例有的功能，Vue组件都拥有。
每个组件都是vue的实例；
每个实例的组成部分：
props、template、data、methods...
每一个组件都有一个template模板，如果没有写template，默认为挂载点下面的所有DOM标签作为模板。
5.vue中父组件向子组件传值是通过绑定属性的形式传递的，父组件可以监听子组件的绑定事件，子组件通过$emit 向外触发事件
监听子组件的自定义事件并绑定事件处理函数为handleDelete,即当子组件触发delete事件时，父组件监听到delete事件后，执行handleDelete函数，删除一个下标，模板发现少了一个下标，会把缺少下标的内容
还没学完，后续待更
查看全部 -
scope指定作用域，都倾向于加这个修饰符，不去影响父组件
查看全部 -
emit子组件触发事件后告诉父组件,父组件需要监听子组件事件
查看全部 -
在给子组件传递值时需要加一个key值，否则会出现警告
查看全部 -
子组件在父组件中注册
查看全部 -
子组件接受参数声明
查看全部 -
组件使用与注册
查看全部 -
data和method可简化写法
查看全部 -
data变成了一个函数了
查看全部 -
template标签下只能有一个根元素，否则报错
查看全部 -
先去安装node,安装完node自动安装npm
查看全部 -
### vue安装
vue安装方式有两种，一是通过npm的方式，二是通过引入官网提供的vue.js作为全局变量。
这里用的是第二种方式，但在我安装npm时遇到了问题，也在此记录下。
1. 1.npm方式
https://baijiahao.baidu.com/s?id=1621989444415819861&wfr=spider&for=pc
安装过程中会通过外网下载chromedriver而卡死，将链接换成淘宝npm镜像下载即可
使用命令：
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
2. 2.引入vue.js
地址：https://vuejs.org/js/vue.js
### 基本语法
1. 创建vue实例
```
new Vue({})
```
2. 挂载点，模板，实例
```
挂载点：el属性对应的dom节点
模板：挂载点下的内容，也可以在vue实例中使用template：表示
实例：new Vue({})
```
3. vue实例中的数据，事件，和方法
```
数据：实例中的data属性，其中可以定义很多种数据
事件：包含点击事件等等，可用v-on：，也可以使用@代替v-on:
方法：methods:中定义方法
new Vue({
el:"#app",//挂载点
methods:{
handleClick:function(){
alert(123)
}
}
})
```
4. vue的属性绑定和双向数据绑定
```
属性绑定：v-bind: 或用： 代替。将属性中的值在vue实例中赋值
双向数据绑定：:value=仅为单享数据绑定，v-modle=为双向数据绑定
```
5.vue计算属性和侦听器
```
计算属性：computed:属性，如果本次计算的值未改变则会使用上次计算的缓存值
侦听器：watch:侦听一个计算属性的变化
```
6. v-if,v-show,v-for
> ```v-if：```给属性赋予true或false值，控制标签是否展示，原理是删除该dom元素，所以在大量操作时，频繁增加或删除dom元素会影响性能，建议仅处理单个元素时使用。
> ```v-show:```与v-if作用一样，但是该标签不会直接操作dom元素，而是通过添加元素的属性去控制的，所以在大量隐藏或者显示操作时使用v-show标签效率比较高.
> ```v-for:```迭代操作，v-for="item of list" 可以使用key加快循环效率，但是key不建议重复，如果重复使用index表示 ```:key="index"```
### vue中的组件
1. todolist
```
<!-- 动态追加list -->
<div id="app">
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
<ul>
<li v-for="(item,index) of list" :key="index" >{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
inputValue:"",
list:[]
},
methods:{
handleSubmit : function(){
this.list.push(this.inputValue),
this.inputValue=''
}
}
})
```
2.todolist中组件拆分
```
可以使用Vue.component()定义局部vue组件
查看全部 -
computed 计算属性
watch 侦听器
methods 定义按钮事件方法
push 方法 向对应函数添加值
Vue.component（组件名称{
props:['']
template: 内容 template 模板
}） 创建组件
全局组件
components:{
'组件名称':
对应局部组件
}
查看全部
举报