第一步：下载Vue
利用npm器下载vue到Windows10，这儿我选择的下载路径是D:\Desktop\code
查看是否成功
下载vue，命令：npm install vue -S 或者 npm install vue --save
通过编辑器打开目录可以看到
OK，现在我们可以开始玩一下vue了
Vue demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div id="app">
<!-- vue的模板语法{{}}双大括号插值 react {}-->
<h2>{{ msg }}</h2>
<h3>{{1+1}}</h3>
<h4>{{ isTrue }}</h4>
<h1>{{ str.split('').reverse().join('')}}</h1>
<h2>{{ 1>2 ? '真':'假'}}</h2>
<h3>{{ {name:'NBA蔡徐坤'} }}</h3>
</div>
<!--1.引包-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 2.创建实例化对象
//数据发生改变时,视图发生改变,简言之,数据驱动视图
var data = {
//数据属性
//既可以是一个对象 也可以是一个函数
msg:'观山湖',
isTrue: 1==1,
str: 'hello Vue'
}
// 如果template中定义了内容那么优先加载template,如果没有定义内容那么加载的是#app的模板
var vm = new Vue({
el:'#app',//目的地
data:data,
template:``
// template:`<div>{{ msg }}</div>`
});
console.log(vm.$el === document.getElementById('app'));
console.log(vm.$data === data);
//除了数据属性vue实例还暴露了一些有用的实例属性和方法.他们都有前缀$
</script>
</body>
</html>
实现效果如下
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
