- 一,练习
-
- 二,vue指令
-
- 三,Vue指令v-on v-bind
-
- 四,Vue 组件
-
- 五,Vue项目
-
-
–1,测试 - <!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>测试 ?Vue基础语法</title>
?? ??? ?
?? ??? ?<!-- 引入外部文件的路径问题:
?? ??? ??? ?1. 如果你想要的引入的资源,和你在同级目录,直接写 vue.js
?? ??? ??? ?2. 如果你想要的引入的资源,和你不在同级目录,就先写同级的目录再继续写资源名称js/vue.js
?? ??? ?-->
?? ??? ?<script src="js/vue.js"></script>
?? ??? ?
?? ?</head>
?? ?<body>
?? ??? ?<div id="d1">
?? ??? ??? ?{{msg}}
?? ??? ??? ?{{show()}}
?? ??? ??? ?{{add(1,2)}}
?? ??? ?</div>
?? ??? ?<script>
?? ??? ??? ?new Vue({
?? ??? ??? ??? ?el:"#d1",
?? ??? ??? ??? ?data:{
?? ??? ??? ??? ??? ?msg:100
?? ??? ??? ??? ?},
?? ??? ??? ??? ?methods:{
?? ??? ??? ??? ??? ?// show:function(){ //标准写法
?? ??? ??? ??? ??? ?show(){ //简写
?? ??? ??? ??? ??? ??? ?alert(1)
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?// add:function(a,b){ //标准写法
?? ??? ??? ??? ??? ?add(a,b){ //简写
?? ??? ??? ??? ??? ??? ?alert(a+b)
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?})
?? ??? ?</script>
?? ?</body>
</html>
二,vue指令
–1,概述
使用方式: 就是在HTML的标签上,加一些v-的指令.
v-model: 实现数据驱动,双向绑定.
v-if: 用来判断,不满足判断条件就不展示
v-show: 用来判断,不满足判断条件就不展示(通过css实现)
v-else-if / v-else : 顺序的要求类似于java
v-cloak : 用来解决闪现问题(网页展示了插值表达式)
v-html: 获取数据,也可以解析HTML标签
?
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>测试 ?Vue指令</title>
?? ??? ?<!-- 1.引入vue.js -->
?? ??? ?<script src="js/vue.js"></script>
?? ??? ?
?? ??? ?<style>
?? ??? ??? ?[v-cloak]{
?? ??? ??? ??? ?display: none;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<!-- 2.准备数据渲染区 -->
?? ??? ?<div id="app" v-cloak>
?? ??? ??? ?{{msg}} <br />
?? ??? ??? ?{{msg}} <br />
?? ??? ??? ?<!--?
?? ??? ??? ??? ?2.1. ?v-model是Vue的指令,实现了双向绑定的功能.把值绑定到指定属性上
?? ??? ??? ??? ?数据驱动,双向绑定: 改Model会影响View,改View会影响Model?
?? ??? ??? ?-->
?? ??? ??? ?<input type="text" v-model="msg" />
?? ??? ??? ?<!-- 2.2. v-html指令可以解析数据,并识别HTML代码 -->
?? ??? ??? ?<p v-html="msg"></p>
?? ??? ??? ?<!-- 2.3. v-cloak指令解决插值表示的闪现问题 -->
?? ??? ??? ?<!-- 2.4. v-if指令用来做判断,条件满足才展示,不满足就不展示 -->
?? ??? ??? ?<p v-if="person.age>=18">成年人</p>
?? ??? ??? ?<!-- 2.5. v-show指令也用来做判断,不满足的话,利用css控制着style="display: none;" -->
?? ??? ??? ?<p v-show="person.age>=18">成年人</p>
?? ??? ??? ?<!-- 2.6. v-else指令,组成顺序依次 if...else if...else -->
?? ??? ??? ?<p v-if="type === 'A'">优秀</p>
?? ??? ??? ?<p v-else-if="type === 'C'">中等</p>
?? ??? ??? ?<p v-else-if="type === 'B'">良好</p>
?? ??? ??? ?<p v-else>错误</p>
?? ??? ??? ?<!-- 2.7. v-for指令用来循环,可以循环数组,类似于JS里的for...in语法,
?? ??? ??? ??? ?i表示遍历得到的数据,index是下标
?? ??? ??? ? ?-->
?? ??? ??? ?<ol>
?? ??? ??? ??? ?<li v-for="i in arr">{{i}}</li>
?? ??? ??? ?</ol>
?? ??? ??? ?<ul>
?? ??? ??? ??? ?<li v-for="i,index in arr">数据是:{{i}} -> 下标是:{{index}}</li>
?? ??? ??? ?</ul>
?? ??? ?</div>
?? ??? ?<!-- 3.创建Vue对象 -->
?? ??? ?<script>
?? ??? ??? ?new Vue({
?? ??? ??? ??? ?el:"#app", //挂载点
?? ??? ??? ??? ?data: { ?//要被渲染的数据
?? ??? ??? ??? ??? ?msg : '<h1>hello vue123</h1>',
?? ??? ??? ??? ??? ?type: 'C' ,
?? ??? ??? ??? ??? ?person:{
?? ??? ??? ??? ??? ??? ?age:10
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?arr : ['杨幂','迪乐热巴','Anglelababa']
?? ??? ??? ??? ?}
?? ??? ??? ?})
?? ??? ?</script>
?? ?</body>
</html>
三,Vue指令v-on v-bind
–1,测试
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>测试 ?Vue指令</title>
?? ??? ?
?? ??? ?<!-- 引入vue.js -->
?? ??? ?<script src="js/vue.js"></script>
?? ?</head>
?? ?<body>
?? ??? ?<!-- 渲染区 -->
?? ??? ?<div id="app">
?? ??? ??? ?<!-- 1. v-on指令用来给HTML元素添加Vue事件,
?? ??? ??? ??? ??? ?用:指定事件的触发方式v-on:可以简写成一个@
?? ??? ??? ? -->
?? ??? ??? ?<button v-on:click="show()">点我1</button>
?? ??? ??? ?<button @click="say('hi bro')">点我2</button>
?? ??? ??? ?<button v-on:dblclick="say('hi vue')">点我3</button>
?? ??? ??? ?<!-- 练习:计数器,点一次按钮就把次数++ -->
?? ??? ??? ?<button v-on:click="count++">赞{{count}}</button>
?? ??? ??? ?
?? ??? ??? ?<!-- 2. v-bind指令用来获取变量的值-->
?? ??? ??? ?<a href="{{url}}">点我跳转1</a> ?<!-- 错的 -->
?? ??? ??? ?<a v-bind:href="url">点我跳转2</a> <!-- 对的 -->
?? ??? ??? ?<a :href="url">点我跳转3</a> <!-- 简写 -->
?? ??? ?</div>
?? ??? ?<!-- Vue对象 -->
?? ??? ?<script>
?? ??? ??? ?new Vue({
?? ??? ??? ??? ?el:"#app",//挂载点
?? ??? ??? ??? ?data:{
?? ??? ??? ??? ??? ?count:0 ?,//计数器
?? ??? ??? ??? ??? ?url:'https://www.baidu.com'
?? ??? ??? ??? ?},
?? ??? ??? ??? ?methods:{ //存方法
?? ??? ??? ??? ??? ?// show:function(){
?? ??? ??? ??? ??? ?show(){//函数的简写形式
?? ??? ??? ??? ??? ??? ?alert(100);
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?say(a){
?? ??? ??? ??? ??? ??? ?alert(a);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?})
?? ??? ?</script>
?? ?</body>
</html>
四,Vue 组件
–1,概述
当想要扩展HTML的功能时,使用vue定义一些组件.
1,全局组件: Vue.component(组件名, 组件的功能)
2,局部组件: 在Vue对象里, 再加一个属性components
3,使用组件: 在数据渲染区 , 直接把组件名当做HTML的标签名用
区别? 全局组件可以被多个Vue对象使用.局部组件只能在当前Vue对象中使用.
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>Vue 组件Component</title>
?? ??? ?<!-- 1.导入vue.js -->
?? ??? ?<script src="js/vue.js"></script>
?? ?</head>
?? ?<body>
?? ??? ?<!-- 2.数据渲染区 -->
?? ??? ?<div id="app">
?? ??? ??? ?<!-- 5.使用组件 -->
?? ??? ??? ?<Hellocom></Hellocom>
?? ??? ??? ?
?? ??? ?</div>
?? ??? ?
?? ??? ?<div id="d1">
?? ??? ??? ?<Hellocom></Hellocom>
?? ??? ??? ?<person></person>
?? ??? ?</div>
?? ??? ?<script>
?? ??? ??? ?//4. 创建Vue的全局组件(可以被多个Vue实例使用):类似于扩展了HTML的标签
?? ??? ??? ?//Vue.component(1,2)-1是组件名(最好是全小写)-2是组件的显示效果
?? ??? ??? ?Vue.component('Hellocom',{
?? ??? ??? ??? ?template : '<h1>你好 Vue组件</h1>' //组件的显示效果
?? ??? ??? ?})?
?? ??? ??? ?//3. 创建Vue对象
?? ??? ??? ?new Vue({
?? ??? ??? ??? ?el:'#app'
?? ??? ??? ?})
?? ??? ??? ?new Vue({
?? ??? ??? ??? ?el:'#d1' ? ?,
?? ??? ??? ??? ?// 局部组件(只被当前的Vue对象拥有,在指定渲染区可以使用)
?? ??? ??? ??? ?components: {
?? ??? ??? ??? ??? ?'person':{//组件名
?? ??? ??? ??? ??? ??? ?template : '<h1>你好 person组件</h1>' //组件的显示效果
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?})
?? ??? ??? ?
?? ??? ?</script>
?? ?</body>
</html>
五,Vue项目
–1,安装脚手架
node -v ? #检查nodejs的安装版本
npm config get registry # 查看当前配置的镜像，结果是默认的国外网址
npm config set registry https://registry.npm.taobao.org #设置成淘宝镜像
npm install vue-cli -g ?#安装vue-cli脚手架
vue -V #查看版本
where vue #vue安装在哪里
?
|