Vue.js初学

Vue

尝试 Vue.js 最简单的方法是使用 JSFiddle 上的 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1. vue是一个渐进式的框架,轻量,易上手.

2. vue 是一个M V VM 的一个框架
   M(Module)数据层
   V(View)视图层
   VM(ViewModule)视图层

3. 实例化
   接受的参数是一个参数

new Vue({
	 el: '#app',//吧vue的实例挂载到哪个元素上,一般情况下,一个页面只有一个vue实例,所以用id选择器,
	 唯一性.
	data:{//data数据是一个对象   双向绑定的数据
	
	},
	methods: {
            方法1() {
                console.log(666)
            },
            方法2(){
            }
        }
})

4. 指令 v-开头

• v-show//控制元素的显示隐藏,通过display:none/block来控制 . 在频繁的操作dom的时候用
• v-text //解析文本
• v-html //解析html
• v-on:eventname //添加事件 @eventname 简写模式
• eventname:click keyup keydown chang input

事件修饰符 //eventname.修饰符

• .prevent //阻止默认行为

• .stop //阻止冒泡

• .once //之触发一次的回调

• .self //只出发自身的事件

• .capture //捕获阶段触发的
  鼠标按键修饰符

• .left 鼠标右键

• .right 鼠标左键

• .middle 鼠标中键

• @keyup.按键码=‘变量值’
  {keyCode | keyAlias} - 只当事件从特定触发的时候才会触发回调

• v-bind:属性名=‘变量名’ //绑定一个动态的属性

• 简写 :属性名=‘变量名’

• 属性名=‘变量名’ //不加冒号解析出来是字符串

• :属性名=‘变量名’ //加冒号解析出来是按变量解析

• v-for --------循环

• Array | Object | Number | String

:key='唯一标识index||id'

Array

   -v-for='(item,index,key) in list' :key='index'	第一个参数是每一项,第二个参数是下标,第三个参数可以省略

Object

    v-for='(val,key,index) in obj'	第一个参数是键值,第二个参数是键名,第三个参数是下标

Number

    v-for='(item,index,key) in list'	第一个参数是从数值1开始,第二个参数是下标,第三个参数可以省略

String

     v-for='(item,index,key) in list'	第一个参数是字符串里面的每一个值,第二个参数是下标,第三个参数可以省略

---

v-cloak 这个指令保持在元素上直到关联实例结束编译,他需要配合display:none一起使用

	[v-cloak]{
	display:none;
	}


	v-pre 			//跳过当前的元素和它子元素的编译过程(也就是不编译)
	v-model    	//双向数据绑定		原理:@input='txt'=$event.target.value'
	一般用在表单元素上:input 	textarea	select
	v-if		//控制元素的显示隐藏,但条件不满足的时候,dom元素不会渲染出来
	v-else-if   v-else 	//必须配合v-if使用

---

计算属性

• 计算属性要把最终的结果return 出去,多个计算属性用逗号隔开
• 缓存属性(计算属性所依赖的数据发生变化的时候,会重新计算.数据没有变化的时候就走缓存)

computed: { //计算属性   使用的时候不用加括号
            reverseMsg() { //计算属性要把最终的结果return 出去,多个计算属性用逗号隔开
                return this.msg.split('').reverse().join('') //反转
            },
            Cont() {
                return this.arr.filter(item => item > 60) //判断分数
            },
             reverseMsg: { //访问器属性
                get() { //获取值
                    console.log('get')
                },
                set(val) { //设置值
                    console.log(val, 'set')
                }
            },
        },
        methods: { //方法也可以实现  使用的时候必须加括号来调用
            reverseFn() {
                return this.msg.split('').reverse().join('') //反转
            },
            ContFn() {
                return this.arr.filter(item => item > 60) //判断分数
            }
        },
         watch: { //侦听器
			  msg(news, olds) {//第一个是新值,第二个是旧值
			                console.log()
			            }
        }