Vue介绍以及模板语法-插值
程序员文章站
2022-05-14 12:24:28
1.Vue的介绍 Vue是一套用于构建用户界面的渐进式框架。 注意：Vue是一个框架，相对于jq库来说，是由本质的区别的：https://cn.vuejs.org/ Vue不支持IE8及一下版本，因为Vue使用了IE8无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript ......
1.vue的介绍
vue是一套用于构建用户界面的渐进式框架。
注意：vue是一个框架，相对于jq库来说，是由本质的区别的：
vue不支持ie8及一下版本，因为vue使用了ie8无法模拟的
<body>
<div id="div">
{{user_name}}
</div>
</body>
<script src="./vue.js"></script>
<script>
var app = new vue({
el:'#div', // 设置要操作的元素
// 要替换的额数据
data:{
user_name:' holle word'
}
})
</script>
2.模板语法-插值
使用{{}}的形式在html中获取实例对象对象中data的属性值；这种使用{{}}获取值得方式，叫做插值或插值表达式；
2.1文本
<body>
<div id="div">
文本插值 {{html_str}}
</div>
</body>
<script>
var app = new vue({
el:'#div',
data:{
html_str:'<h2>这是文本<h2>'
}
})
</script>
2.2使用javascript表达式
<body>
<div id="div" >
{{ tt > 9 ? '大' : '小'}}
{{ dd() }}
</div>
</body>
<script>
var app = new vue({
el:'#div',
data:{
tt:6,
dd:function(){return 1+2}
}
})
</script>
上一篇： 3d爱心代码