Vue.js入门与核心特性-优快云博客

本文链接：https://blog.youkuaiyun.com/CsbLanca/article/details/88959099

Vue.js及其相关使用

vue是什么

在这里插入图片描述
渐进式
渐进式:就是知道多少就能直接使用的方式,学多少,用多少

vue是一个js库
vue只关注试图层
Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML
Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
Vue学习起来非常简单。
官网:https://cn.vuejs.org/

vue特性

轻量级
数据绑定,双向mvvm模式(model,view,viewmodel)
内置统一指令,也可以自定义指令
插件化,不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件
组件化,组件可以扩展 HTML 元素，封装可重用的代码
允许我们使用小型、自包含和通常可复用的组件构建大型应用

历史

技术比较新,2014年发布,作者是前goolgle员工尤雨溪,现任阿里巴巴技术顾问

使用

下载vue.js对应版本在本地文件,直接引入使用

在这里插入图片描述

简单案例

1.引入vue.js

2.准备一个div标签

3.通过id挂载元素

全部代码

页面信息
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>
    <!--//准一个div-->
    <div id="app">
        {{message}}
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                message:"试试?ok,vue成功"
            }
        })
    </script>
</body>
</html>

vue中指令_双向绑定

双向绑定

所谓双向绑定,就是view视图层修改了数据,通过vue内置的监听,监听到数据的改动,从而修改model中的数据;同样,如果model中的数据修改,视图层view的数据也将得到修改,这就是mvvm模型

mvvm模型

代码演示

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>
<!--
    v-mode主要用来做双向绑定
    只能用到表单元素上,(input,select,textarea)
    表单元素,(文本框,密码框,多选,单选,下拉,文本域)
-->
<div id="app">
    <!--文本框的双向绑定-->
    <input type="text" v-model="inputValue"/>{{inputValue}}
    <hr/>
    <!--单选-->
    性别:
    <input name="sex" v-model="sexValue" type="radio"/>男
    <input name="sex" v-model="sexValue" type="radio"/>女
    {{sexValue}}
    <hr/>
    爱好:
    <input name="hobby" v-model="hobbys" value="1" type="checkbox"/>打篮球
    <input name="hobby" v-model="hobbys" value="2" type="checkbox"/>踢足球
    <input name="hobby" v-model="hobbys" value="3" type="checkbox"/>打羽毛球
    <input name="hobby" v-model="hobbys" value="4" type="checkbox"/>打乒乓球
    {{hobbys}}
    <hr/>
    国家:
    <select v-model="selectVal">
        <option value="china">中国</option>
        <option value="jpan">日本</option>
        <option value="usa">美国</option>
        <option value="africa">非洲</option>
    </select>
    {{selectVal}}
    <hr/>
    文本框:
    <textarea v-model="textVal"></textarea>{{textVal}}
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            inputValue:"试试?",
            sexValue:"true",
            hobbys:[1,4],
            selectVal:"china",
            textVal:"我是一个可编辑的文本框"
        }
    })
</script>
</body>
</html>

对应页面展示
在这里插入图片描述

vue中3种挂载方式

<div id="app"></div>
new Vue({
	el:"#app"
})

<div class="bpp"></div>
new Vue({
	el:".bpp"
})

<div ></div>
new Vue({
	el:"div"//标签挂载模式只对第一个标签有效
})

==Vue中数据模式==
new Vue({
	el:"#app",
	data:{//信息,数组,对象,
			message:"信息",
			array:["1","2","a","你好","abc"],
			user:{
				id:1,
				name:"张三",
				age:18,
				...
			}
	},
	methods:{
		say(){
				alert("我是一个方法!")
		}
	}
})

方法调用

	{{say()}}
	在两个花括号里面写方法就好了{{}}

vue中组件使用方式

全局组件:
Component:组件;
Vue.component(“组件名字”,”组件的配置”)
局部组件:
在vue对象上:
components:{
组件名字:{组件的配置},
组件名字:{组件的配置},
}

代码:

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>
<div id="app">
    <mytag></mytag>
</div>
<div id="app2">
    <mytag></mytag>
    <!--
        全局组件,被vue挂载到的地方都可以使用
    -->
</div>

<script>
    /**
     * 注意点:
     *  1.一定要先定义组件,然后在进行vue的挂载
     *  2.模板中一定要有个跟标签
     *  3.取名的问题
     *  一般都是定义一个公共的组件,方便以后调用和少写代码
     *  全局组件:
     *      被所有vue挂载到的地方,都可以使用,这叫全局组件
     *  如何定义一个组件:
     *     Vue.component("组件名字",{组件模板})
     */
    Vue.component("mytag",{
        //组合模板
        template:"<h1>举头望明月,低头思故乡</h1>"
    })
    new Vue({
        el:"#app",
    })
    new Vue({
        el:"#app2"
    })
</script>
</body>
</html>

vue事件绑定

联系js中,注册事件的方式

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>
<div id="app">
    <!--
        v-on:事件绑定
        标准形式:
        v-on:事件类型="方法名()"
        简写形式:
        @事件类型="方法名()"
    -->
    <input type="button" value="点我试试" v-on:click="say"/>
    <hr/>
    <input type="button" value="点我试试" @click="hello(18)"/>
</div>


<script>
    new Vue({
        el:"#app",
        data:{
        },
        methods:{
            say(){
                alert("再点一次?")
            },
            hello(age){
                alert("你今年"+age+"岁?")
            }
        }
    })
</script>
</body>
</html>