vue相关（二）--插值表达式过程及其他汇总

插值表达式过程

一、创建子组件
1、在components下面创建.vue文件
默认三部分：
template—v
容器div
–插值表达式，data中的值插到{{}}中。
p{{message}}p --变量，属性
script–m，js
–属性赋值，
–{}相当于对象，
–[] 相当于列表

	data（）
	{
	return {
			message:"hello你好！"
	}

style scoped–美容

二、app. vue中调用。
1、script>导入模块
import greeting from ‘./components/helloworld.vue’
2、声明子组件
components:{
greeting,
}
3、使用子组件：在父组件中给子组件传值
greeting开标签闭标签

三、添加样式
1、greeting.vue中添加样式
style scoped>
/装饰/
.msg p{color:red}
/style>

其他知识汇总
1、绑定属性：动态使用属性，可以把属性当做标签使用，!-- v- 开头的为vue指令，使用v-bind来绑定属性 -->
如： span v-bind:title=“dream”> 好好学习就是正确的方向 。/span>
data()
{
return {
message: “hello,vue学子们！”,
name: “琳琳”,
dream:“信仰”
}

2、如果不能正常上网，就下载个vue.js devtools插件，并拖到 网页 ，开发者模式，下面。就会有vue的入口，这样就可以多了种调试方法，在页面中进行调试

3、v-if的使用：
p v-if = “isNotLin”> 是好学生 /p>
data()
{
return {
message: “hello,vue学子们！”,
name: “琳琳”,
dream:“信仰”,
isNotLin: false,
}

4、v-if 与v-show的区别：
v-if 每次都要重新删除或创建元素 -->
v-show 每次不会重新进行dom的删除和创建操作，只是切换了元素的 -->

!-- v-if v-else-if v-else 条件1，条件2，不然条件三 -->
p v-if = “isNotLin”> 是好学生

p v-show = “isNotLin”> 是好学生
p>有一天，{{username}}想去学校
p v-if=“age >=70”> {{username}}就回家
p v-else-if=“age >=20”> {{username}}就吃饭
p v-else> {{username}}就回家

5、v-for
th v-for=“project in project_headers”> {{project}}
!-- 项目名称–>
!-- 项目负责人–>
!-- 应用名称–>

return {
project_headers: [‘项目名’,‘负责人’,‘应用名’]
}

---

<!-- v-bind:可以缩写为：-->
<tr v-for="(item, key) in projects" :key="key">
    <td>{{item.name}}</td>
    <td>{{item.leadername}}</td>
    <td>{{item.appname}}</td>
</tr>