|
vue是一个渐进式的前端框架,渐进式是指按需配置
1)导入vue.js,使用vue的功能
2)准备数据渲染区,插值表达式{{msg}}--获取msg变量的值
3)new vue()
? ? ? ? 分步过程(注释部分)-->优化代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试vue的入门案例</title>
<!--1,导入vue.js,用vue的功能-->
<script src="vue.js"></script>
</head>
<body>
<!--2,准备数据渲染区,{{msg}}叫插值表达式,是vue的固定语法,获取msg变量的值-->
<div id="app"> {{msg}} </div>
<!--3,导入vue.js,vue就提供了Vue的工具,想用就new-->
<script>
// //3.1,准备数据(js对象)
// var a = {
// msg:"hello vue~"
// }
// //3.2把数据渲染到挂载点
// var com = {
// //el属性是用来描述元素(挂载点),data属性视具体要展示的数据
// el:"#app",//通过css提供的id选择器,选中了id=app的元素
// data:a//即将把a的元素渲染在挂载点
// }
// //3.3,准备vue对象
// new Vue(com);
//3.1,准备数据(js对象)
//3.2把数据渲染到挂载点
//3.3,准备vue对象
new Vue( {
//el属性是用来描述元素(挂载点),data属性视具体要展示的数据
el:"#app",//通过css提供的id选择器,选中了id=app的元素
data:{
msg:"hello vue~"
}
});
</script>
</body>
</html>
--运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试vue的运算符</title>
<!--1.导入vue.js-->
<script src="vue.js"></script>
</head>
<body>
<!--2.准备数据渲染区-->
<div id="app">
{{a}} {{b}} {{a+b}} {{a*b}}
自增:{{a++}}
自减:{{b--}}
{{a>10?'yes':'no'}}
字符串的操作:{{c}} {{c.length}} {{c.concat(123)}}
{{c.replace('a','857')}}
</div>
<!--3.new Vue()-->
<script>
new Vue({
el:"#app",
data:{
a:10,
b:20,
c:"dad",
},
methods:{
show:function(){
console.log('hello vue')
}
}
})
</script>
</body>
</html>
--定义函数
先在methods中定义函数,然后使用插值表达式调用函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试 vue的函数</title>
<!--导入vue.js-->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
调用vue的函数:{{show()}}
{{add(1,2)}}
</div>
<script>
new Vue({
el : "#app",
data : {
c : "dad"
},
methods : {
show : function(){
console.log("hello vue");
},
add : function(a,b){
console.log(a);
}
}
})
</script>
</body>
</html>
--Vue解析各种形式的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue解析 对象和数组</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
name属性的值是:{{a.name}} ,age属性的值是:{{a.age}}
big属性的值是:{{b.big}},say属性的值是: {{b.say}}
解析数组里的数据:{{c[1].fristname}}
</div>
<script>
new Vue({
el : "#app",//挂载点
data : {//数据区
//对象名:对象信息
a : {//自定义对象
name:"jack",
age:20
},
b : {
big : 5,
say : "WDNMD"
},
c:[//数组:::[{},{}]
{
fristname:"jack",
lastname:123
},
{
fristname:"rose",
lastname:"456"
}]
}
})
</script>
</body>
</html>
--Vue中data的三种写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试 data的三种写法</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script>
new Vue({
el : "#app",
data(){
return{//新语法
msg:"hi!vue"
}
}
// data : function(){
// return{
// msg:"hi!vue"
// }
// }
})
</script>
</body>
</html>
--测试
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试vue的指令</title>
<script src="vue.js"></script>
<style>
/*css语法:选择器{属性名:属性值}*/
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!--2.闪现的问题:在浏览器上显示了插值表达式 使用v-cloak属性,使用css隐藏效果-->
<div id="app" v-cloak>
{{msg}} {{msg}} {{msg}}
<!--1.v-model双向绑定-->
<input type="text" v-model="msg" />
<!--3.v-if用来判断的,满足条件才展示-->
{{age}}
<!--v-if和v-show的区别?都可以判断,后者即便不满足条件也会被网页加载只是隐藏了-->
<span v-if="age>=18">成年人</span>
<span v-show="age>=18">成年人</span>
<!--v-if v-else-if v-else组合的判断条件-->
<span v-if="age>=60">老年人</span>
<span v-else-if="age>=30">青壮年</span>
<span v-else="age>=10">少年</span>
<!--4.v-for用来循环的-->
{{arr[0]}}
{{arr[1]}}
{{arr[2]}}
<!--o是渠道的数据,arr是数组名,相当于增强for循环-->
用v-for获取数组里的元素:<h1 v-for="o in arr">{{o}}</h1>
用v-for获取数组里的元素:<h1 v-for="o,i in arr">{{i}}{{o}}</h1>
<!--5.v-on用来绑定一个具体的事件,点击按钮时触发函数,@是一种简写形式简化了v-on-->
<button v-on:click="show()">点我1</button>
<button v-on:dbclick="show()">点我2</button>
<button @click="show()">点我3</button>
<button @dbclick="show()">点我4</button>
<!--6.v-bind用来获取变量的值-->
<!--<a href="{{url}}">链接1</a> 错的,把整个的插值表达式当做字符串了-->
<a v-bind:href="url">链接2</a>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"hello",
age:16,
arr:["请求","所示","方法"],
url:"https://www.baidu.com/?tn=49055317_4_hao_pg"
},
methods : {
show : function(){
console.log('通通依旧爱我')
}
}
})
</script>
</body>
</html>
--Win+R ,输入cmd,输入以下命令
C:\Users\Administrator>node -v
C:\Users\Administrator>npm config set registry https://registry.npm.taobao.org
C:\Users\Administrator>npm config get registry
C:\Users\Administrator>npm install vue-cli -g
C:\Users\Administrator>vue -V
C:\Users\Administrator>where vue
|