Vue 引入及简单示例

Vue 渐进式JavaScript 框架 学习笔记 - Vue 引入及简单示例

目录

与jquery区别

Vue引入

两种方式引入

下载到本地

代码结构

简单示例

Style中引入vue.js

对vue语法进行解析

对三目运算符支持

设置变量（状态）

总结

---

与jquery区别

不需要手动操作dom，都封装到vue底层中了，只需要数据开发即可。

Vue引入

两种方式引入

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

 或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

安装教程给出了更多安装Vue的方式。不推荐新手直接使用 vue-cli, 尤其是在你还不熟悉基于Node.js的构建工具时。

下载到本地

2.x版本下载到本地。下载地址如下：

https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js

3.x版本下载到本地。下载地址如下：

https://unpkg.com/vue@3/dist/vue.global.js

代码结构

下载到本地后，创建lib文件夹，放入待之后引入调用。

2.x版本的命名为vue.js，3.x的命名为vue.next.js。

结构如下图：

简单示例

使用一个div作为一个根节点来解析vue。

支持的是表达式语法。

Style中引入vue.js

<script src="lib/vue.js"></script>

对vue语法进行解析

创建一个id为box的div与另一个div中设置同样的算式，

进行对比查看解析情况，示例如下：

<div id="box">
    {
  
  {100 * 3}}
</div>

<div>
    {
  
  {100*3}}
</div>
<script>
    new Vue({
        el:"#box", // element
    })
</script>

对三目运算符支持

示例如下：

<div id="box">
    {
  
  {100 * 3}}
    {
  
  {100>101?'第一个数比第二个数大':'第一个数比第二个数小'}}
</div>

设置变量（状态）

在vue中设置解析的变量也叫状态，是通过在data中设置来实现的。

示例如下：

<div id="box">
    {
  
  {100 * 3}}
    {
  
  {100 > 101 ? '第一个数比第二个数大' : '第一个数比第二个数小'}}
    {
  
  {myname}}
</div>
<script>
    new Vue({
        el: "#box", // element
        data: {
            myname: '我的名字是张三'
        }
    })
</script>

总结

Vue 渐进式JavaScript 框架 学习笔记 - Vue 引入及简单示例