Vue框架系列 Part one
前言
以下是本篇文章正文内容,下面案例可供参考
第一个实例三步骤
一、Vue引入
这里我采用的是线上引入的方式
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
二、实例化vue对象
创建vue对象的实例(在创建对象实例,需要传递一个对象参数)
这个参数有很多属性:el,data
<script>
// 2.vue对象实例化
let vm = new Vue({
el: "#app", //el:挂载点==》指定vue对象实例生效的标签(范围、挂载点)
data: { //data==>数据中心 声明挂载点中要使用的数据 在挂载点中通过插值表达式使用 {{}}
//data中的属性(变量属性),会被挂载vue对象实例上(data中的数据会变成vue实例对象的属性)
msg: 'hello world',//data中自定义的mag属性
str: "你好",//str属性
htmlStr: "<b>我是粗字体文字</b>"//htmlStr属性
},
// methods用来存放函数
methods: {
//完整写法
// fn:function(){
// console.log(111);
// }
//简写写法
fn(){
console.log(111);
}
}
});
console.log(vm);//打印查看vue对象
console.log(vm.msg);//调用属性
console.log(vm.str);
setInterval(() => {
vm.str += ',你好';
//str数据发生改变,会页面会自动更新渲染的数据===》数据绑定
}, 1000);
</script>
三、应用
在页面中定义标签,声明vue实例的挂载点
<div id="app" >
{{msg}}
<h2>{{msg}}</h2>
<p>{{str}}</p>
{{htmlStr}}
{{1}}
{{1+1}}
{{msg.lengt!=0?'hello':'world'}}
{{'你好'}}
</div>
四、参数解析
- el: 将Vue实例与挂载点关联起来
1、挂载点会根据css选择器来选择对应的挂载位置
2、 如果匹配到多个挂载点,只有第一个生效,后面的不生效
3、不要将vue挂载到html或者body上
4、 推荐使用id,直接挂载到这个id上,因为id具备唯一性 - data: 用来指定挂载点中要使用的数据
1、data中的属性可以在挂载点中使用插值表达式来访问{{数据}}
2、data中的数据会成为vue实例的属性
3、data中的数据一旦发生改变,页面会自动更新 - 注意:不要将body标签指定为挂载点
- {{}}中可以使用js表达式
总结
以上就是今天的第一个vue案例,小白报道,如有异议,请大佬指点!!!