XueChProject02

最新推荐文章于 2020-03-27 22:13:00 发布

一觉睡到小小时候

最新推荐文章于 2020-03-27 22:13:00 发布

阅读量135

点赞数

分类专栏：测试文章

本文链接：https://blog.csdn.net/weixin_43983411/article/details/104959835

版权

VueJS

Vuejs 介绍

1). vuejs 是渐进式前端框架 ; —> 在项目中, 可以只使用其中某些功能即可;

2). 使用方式 :
A. 在html页面中引入 vue.min.js 进行使用 ;
B. 可以使用vuejs结合webpack进行打包使用 ;
C. 可以使用官方推荐的 vue-cli 脚手架搭建工程 ;

3). 功能 : 声明式渲染 , 判断和循环 , 双向数据绑定 , 事件处理 ,组件化应用构建

入门案例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <!-- 引入vue.js包 -->
    <script src="vue.min.js"></script>
</head>

<body>
<div id="app">
<!-- view -->
{
  {name}}
</div>



<!-- model and view -->
<script>
//编写MVVM的model部分和viewmodel 部分
var VM = new Vue({
    
        el:'#app', //接管
        data:{
    //model部分
            name:'高'
        }
    });
</script>

</body>





</html>

注意：vue不能接管body；创建vue对象时，可以不定义前面的变量

V-Model

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <!-- 引入vue.js包 -->
    <script src="vue.min.js"></script>
</head>

<body>
<div id="app">
<input type="text" v-model="num1" >+
<input type="text" v-model="num2" >=
<!-- Number.parsInt() 将字符串转变为数字 -->
{
  {Number.parseInt(num1)+Number.parseInt(num2)}}

<button>计算</button>
</div>



<!-- model and v

最低0.47元/天解锁文章

一觉睡到小小时候

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
XueChProject02

VueJSVuejs 介绍1). vuejs 是渐进式前端框架 ; —> 在项目中, 可以只使用其中某些功能即可;2). 使用方式 :A. 在html页面中引入 vue.min.js 进行使用 ;B. 可以使用vuejs结合webpack进行打包使用 ;C. 可以使用官方推荐的 vue-cli 脚手架搭建工程 ;3). 功能 : 声明式渲染 , 判断和循环 , 双向数据绑定 ,...
复制链接

扫一扫