Vue自学之路2-vue初探

初探

用vue实现一个“hello，world”

例子

1）原生JS的写法:DOM操作的方式

<div id='msg'></div>

<script>

var msg = "hello ,world"

var div = document.getElementById('msg');

div.innerHTML = msg;

</script>

2）JQUERY的写法

<div id='msg'></div>

<script type='text/javascript' src='js/jquery.js'></script>

<script>

var msg = "hello ,world"

$('#msg').html(msg);

</script>

3）VUE：数据绑定，不需要直接操作DOM

<div id='app'>

<!-- 插值表达式 -->

<div>{{msg}}</div>

<div>{{ 1+2 }}</div>

<div>{{ msg + '---' + 'Vue' }}</div>

</div>

<!-- 先下载vue.js -->

<script type='text/javascript' src='js/vue.js'></script>

<script>

//1. html中书写标签

//2. 引入vue.js

//3. 使用vue进行数据渲染。

　　var vm = new Vue(

　　{

　　el: '#app', //绑定到id选择器

　　data: {

　　　　"msg": "hello world"

　　}

　　}

)

</script>

说明

Data参数分析：

• el：元素的挂载位置（值可以是CSS选择器或者DOM元素【使用document.getElement】）
• data：模型数据（值是一个对象）

{{}} 插值表达式

• 将数据填充到HTML标签

• 支持JS表达式计算 

VUE代码的运行原理：

编译过程（VUE语法解析成原生JS语法）：Vue代码->Vue框架->原生JS代码。

 

传送门：2021最新测试资料&大厂职位

博主：测试生财（一个不为996而996的测开码农）

座右铭：专注测试开发与自动化运维，努力读书思考写作，为内卷的人生奠定财务自由。

内容范畴：技术提升，职场杂谈，事业发展，阅读写作，投资理财，健康人生。

csdn：https://blog.csdn.net/ccgshigao

博客园：https://www.cnblogs.com/qa-freeroad/

51cto：https://blog.51cto.com/14900374

微信公众号：测试生财（定期分享独家内容和资源）