1.vue.js的快速入门使用
本节内容：
另外几个常见的工具库：react.js /angular.js
官方网站：
官方文档：https://cn.vuejs.org/v2/guide/
在官网下载地址： https://cn.vuejs.org/v2/guide/installation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- {{ message }} 表示把vue对象里面data属性中的对应数据输出到页面中 -->
<!-- 在双标签中显示数据要通过{{ }}来完成 -->
<p>{{ message }}</p>
</div>
</body>
<script>
// vue.js的代码开始于一个Vue对象。所以每次操作数据都要声明Vue对象开始。
let vm = new Vue({
el:'#app', // 设置当前vue对象要控制的标签范围。
// data属性写法方式1
data:{ // data是将要展示到HTML标签元素中的数据。
message: 'hello world!',
}
// 方式2
// data:function () {
// return {
// 'msg':'掀起你的盖头来1！'
// }
// }
// 方式3
data(){ // 单体模式 这种写法用的居多，并且后面学习中有个地方一定要这样写，所以我们就记下来这种写法就可以了
return {
'msg':'掀起你的盖头来2！',
}
}
});
</script>
</html>
1. vue的使用要从创建Vue对象开始 var vm = new Vue(); 2. 创建vue对象的时候，需要传递参数，是自定义对象，自定义对象对象必须至少有两个属性成员 var vm = new Vue({ el:"#app", data: { 数据变量:"变量值", 数据变量:"变量值", 数据变量:"变量值", }, }); el:圈地，划地盘，设置vue可以操作的html内容范围，值就是css的id选择器,其他选择器也可以，但是多用id选择器。 data: 保存vue.js中要显示到html页面的数据。 3. vue.js要控制器的内容外围，必须先通过id来设置。 <div id="app"> <h1>{{message}}</h1> <p>{{message}}</p> </div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test vue</title> </head> <body> <div id="app"> <!-- vue的模板语法，和django的模板语法类似 --> <h2>{{ msg }}</h2> <!-- 放一个变量，会到data属性中去找对应的值 --> <!-- 有人说，我们直接这样写数据不就行吗，但是你注意，我们将来的数据都是从后端动态取出来的，不能写死这些数据啊，你说对不对 --> <h2>{{ 'hello beautiful girl!' }}</h2> <!-- 直接放一个字符串 --> <h2>{{ num+1 }}</h2> <!-- 四则运算 --> <h2>{{ 2+1 }}</h2> <!-- 四则运算 --> <h2>{{ {'name':'chao'} }}</h2> <!-- 直接放一个自定义对象 --> <h2>{{ person.name }}</h2> <!-- 下面data属性里面的person属性中的name属性的值 --> <h2>{{ 1>2?'真的':'假的' }}</h2> <!-- js的三元运算 --> <h2>{{ msg2.split('').reverse().join('') }}</h2> <!-- 字符串反转 --> </div> <!-- 1.引包 --> <script src="vue.js"></script> <script> //2.实例化对象 new Vue({ el:'#app', data:{ msg:'黄瓜', person:{ name:'超', }, msg2:'hello Vue', num:10, } }) </script> </body> </html>
Model 指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。
View 指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。
ViewModel
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 <script> 8 window.onload = function(){ 9 // 创建vm对象 10 var vm = new Vue({ 11 el: "#app", 12 data: { 13 name:"大标题", 14 age:16, 15 }, 16 }) 17 18 console.log(vm.$el) 19 console.log(vm.$data); 20 console.log(vm.name) 21 } 22 23 </script> 24 </head> 25 <body> 26 <div id="app"> 27 <!-- 在双标签中显示数据要通过{{ }}来完成 --> 28 <h1>{{name}}</h1> 29 <p>{{age}}</p> 30 <!-- 在表单输入框中显示数据要使用v-model来完成，模板语法的时候，我们会详细学习 --> 31 <input type="text" v-model="name"> 32 </div> 33 </body> 34 </html>
console.log(vm.$el) # #box vm对象可以控制的范围
console.log(vm.$data); # vm对象要显示到页面中的数据
console.log(vm.message);# 这个 message就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,message只是举例.
1. 如果要输出data里面的数据作为普通标签的内容，需要使用{{ }} 用法： vue对象的data属性： data:{ name:"小明", } 标签元素： <h1>{{ name }}</h1> 2. 如果要输出data里面的数据作为表单元素的值，需要使用vue.js提供的元素属性v-model 用法： vue对象的data属性： data:{ name:"小明", } 表单元素： <input v-model="name"> 使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值，则data里面对应数据的值也会随之发生改变，甚至，页面中凡是使用了这个数据都会发生变化。
