Vue 开发基础
一、安装配置
1、下载安装nodeJs
测试是否安装好 node -v
2、在命令行安装Vue-cli 3.0以上
npm install -g @vue/cli
测试 vue -V
3、在目录中创建项目
vue create project
最好不要ESlint 语法检查不然会烦死
二、VUE 基础
1、子组件
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>{{ message }}</h2>
<h3 v-show="isok">{{ msg2 }}</h3>
<p>
<input type="text" name="test" v-model="message">
<a :href="url" :target="tag">baidu</a>
</p>
</div>
</template>
<script>
export default {
//组件名称
name: 'HelloWorld',
//接受参数
props: {
msg: String,
msg2:String
},
//内部变量
data:function(){
return{
message:"Hello",
isok:false,
url:'http://www.baidu.com',
tag:'blank'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
2、父组件
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your App" msg2="Tianyu" ref="hw"/>
<button @click="test">name</button>
<HelloWorld msg="Welcome to Your2 App" msg2="Tianyu2" ref="hw2"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
methods:{
test:function(){
//操作子组件变量
this.$refs.hw.message="111";
//操作子组件dom
this.$refs.hw.$el.style.color = "blue";
this.$refs.hw2.message="222";
this.$refs.hw2.$el.style.color = "red";
}
},
components: {
HelloWorld
}
}
</script>
