(1)angular:
(1)由Facebook开发 适用于大型项目
(2)react:
(1)由GitHub公司开发
(3)Vue:
(1)由中国人尤雨溪开发 吸取了angular与react的优点
(1)轻量级:该框架大小比较小
(2)中文API:由于是中国人开发 操作文档全是中文 对中国人比较友好
(3)数据驱动:DOM元素让DOM文档随着数据的变化而变化
(4)双向绑定:数据层与视图层的同步 当写入数据的时候 视图层跟着发生变化
(5)MVVM的设计模式:将前段与后端分离出来
(6)组件化开发:HTML + CSS + JS协同开发
(7)单页面的应用:为手机节约内存等
(1)其可以控制一个标签 一个页面 甚至一个项目
<script src="statict/vue.js"></script> // 本地直接导入
<script src="https://cn.vuejs.org/js/vue.min.js"></script> // cdn 导入
(1)作用:
(1)与HTML页面进行关联
(2)html与body不能作为挂载点
(3)一个vue挂载点之匹配一个结果 因此一般VUE挂载点都使用id
<body> <div id="wrap"> {{ }} <hr> <div class="main"> </div> <hr> <div class="main"> {{ }} </div> </div> </body> <script> <!-- 生成一个vue对象--> new Vue({ // el: ‘.main‘ // 与main进行挂载 最下面的main不会被挂载 el:‘#wrap‘ // 与wrap进行挂载 所有的被挂载点都会消失 }) </script>
(2)JS对象(字典)小特性
<script> let age = 18; let user_info = { user:‘SR‘, // 当字典内部的key都是字符串的时候 key中引号可以省略不写 age // 当key中的值为变量的时候 且值与key同名 则值可以不写 age:age }; // age: 18 // user: "SR" console.log(user_info) </script>
(1)在vue实例中通过data添加数据
<div id="app"> <!--插值式获取值--> <p>{{age}}</p> <p>{{name}}</p> <p>{{address}}</p> </div> </body> <script> new Vue({ el:‘#app‘, data:{ // 通过data为挂载点添加数据 age:18, name:‘SR‘, address:‘China‘, } }) </script>
(2)通过插值式获取值
<!--插值式获取值--> <p>{{age}}</p> <p>{{name}}</p> <p>{{address}}</p>
(3)变量接收vue生成的对象 通过变量名访问内部属性(内部属性都是以$开头)
<script> let app = new Vue({ // 变量接收 实例化产生的对象 el:‘#app‘, data:{ // 通过data为挂载点添加数据 age:18, name:‘SR‘, address:‘China‘, } }) </script> <script> console.log(app); // 获取一个对象 内部对应的方法属性 console.log(app.$data.name); // SR console.log(app.$data.age) // 18 </script>
(4)直接通过变量名访问内部的属性
<script> console.log(app); // 获取一个对象 内部对应的方法属性 console.log(app.name); // SR console.log(app.age) // 18 </script>
(1)作用:过滤器本身就是用来处理函数的 其可以将插值式中的数据作为参数传给函数进行处理 得到的函数返回结果就是函数处理后的结果
(2)使用方式:
{{ ...变量 | 过滤器(...变量) }}
(3)过滤器在实例中由filters提供
<div id="app"> <!-- 插值表达式中 可以做些简单的运算--> <p>{{num + 100}}</p> <!-- 字符串方法属性--> <p>{{msg.split(‘‘)[0]}}</p> <!-- 调用过滤器f1--> <p>{{num|f1}}</p> <!-- 该函数传多个参数--> <p>{{ 10, 20, 30, 40 | f2 }}</p> <!-- 给函数括号内传递两个产生--> <p>{{ 10, 20 | f2(50, 80) }}</p> <!-- 传递参数不够 返回Nan--> <p>{{ 120 | f2 }}</p> <!-- 函数内部传参过多 网页报错--> <p>{{ 10, 20, 30, 40,60 | f2 }}</p> </div> </body> <script> let app = new Vue({ el: ‘#app‘, data: { num: 100, msg: ‘消息提示框‘ }, filters: { f1: function (num) { return num * 2 }, f2: function (a, b, c, d) { return a + b + c + d } } }) </script>
原文:https://www.cnblogs.com/SR-Program/p/11637484.html