Vue.js核心库只关注视图层,而我们只需要注重数据的操作就好,通过接下来的学习会更深的理解这句话,vue.js通过很多指令和修饰符来完成对视图的关注,第一个是{{}}

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<script src=”./vue.js”></script> <!– 使用vue.js需要先使用 –>
</head>
<body>
<div id=”root”>
<!– 可以直接写变量–>
{{userName}}
<!– 可以写三元表达式 –>
{{true?’男’:’女’}}
<!– 可以调用函数 功能是倒叙–>
{{userName.split(“”).reverse().join(“”)}}
</div>
</body>
<script>
new Vue({
el:’#root’,//挂载的元素,只有在这个区域内才能使用Vue
data:{
userName:’仓央嘉措’,
sex:”男”,
num:1,
src:’http://img0.imgtn.bdimg.com/it/u=4150802370,1902002068&fm=11&gp=0.jpg’,
str:’我是一只小小小鸟’
},//变量定义在里面
methods:{},//方法定义在这里面
filters:{},//过滤器
components:{},//组件
computed:{}//计算属性
})
</script>
</html> 
执行结果:

————————————————
版权声明:本文为CSDN博主「很单纯的娃」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_37826599/article/details/105130036